Почему не работает моя работа с flex-stretch flexbox?

Я пытаюсь растянуть три коробки с гибкими дочерними элементами, используя 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;
}

ПРИМЕЧАНИЕ. Я не могу установить фиксированную высоту для трех черных ящиков, потому что тогда, если у всех трех ящиков есть только один значок, это будет выглядеть немым.

Ответ 1