为什么我的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

我完全忘记了我是如何到达那里的，但this jsfiddle似乎做了你想做的事。 （我想我大多只是删除了一堆弹力，并添加了更简单的flex: 0 / flex: 1语法。：）