为什么我的flexbox flex-stretch属性不起作用？

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

我忘记了到底是怎么到达那里的,但这个jsfiddle似乎做你想要的.(我想我大多只是删除了一堆弹力,并添加了更简单flex: 0/ flex: 1语法.:)