爲什麼Flexbox彈性屬性不起作用？

Question

我試圖讓三個柔性兒童箱伸展使用flexbox填充容器，以便所有三個框都是相同的大小。但是，我不想讓前兩個內框拉伸 - 我總是希望它們的尺寸相同。有點難以解釋，所以這裏是我想要它看起來像這樣：

哪裏紅色的盒子都是相等和固定的高度彼此相同，與藍色框（紅色和藍色框之間的高度關係不是重要的），而綠箱則是延伸到最大的黑箱的那個大箱子。所以我想避免這樣的事情，例如：

這裏有一個的jsfiddle：http://jsfiddle.net/agentemi1y/ssxu5moy/

下面是基本的html：

<div class="container"> 
<div class="box box1"> 
    <div class="inside-box"></div> 
    <div class="inside-box"></div> 
    <div class="inside-box last-box"></div> 
</div> 
<div class="box box2"> 
    <div class="inside-box"></div> 
    <div class="inside-box"></div> 
    <div class="inside-box last-box"></div> 
</div> 
<div class="box box3"> 
    <div class="inside-box"></div> 
    <div class="inside-box"></div> 
    <div class="inside-box last-box"></div> 
</div> 

.container { 
border: 1px solid red; 
width:90%; 
height: 100px; 
display:flex; 
justify-content: center; 
align-items: center; 
align-content: stretch; 
} 

.box { 
    border: 1px solid purple; 
    flex: 0 1 33%; 
    margin: 0 20px; 
    align-self: stretch; 
    display:flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-content: flex-start; 
} 

.inside-box { 
    border: 1px solid green; 
    min-height: 0.5rem; 
    flex: 0 1 100%; 
    align-self: flex-start; 
} 

.last-box { 
    background-color: pink; 
    align-self: stretch; 
} 

注意：我無法爲三個黑匣子設置固定高度，因爲如果這三個盒子中只有一個圖標，它就會顯得笨拙。

Answer 1

我忘了我是怎麼到那裏的，但this jsfiddle似乎做你想做的。 （我想我主要是刪除了一堆拉伸，並添加了更簡單的flex: 0/flex: 1語法。:)