为什么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语法。:)