dlaczego nie działa moja własność flex-stretch flexbox?

Question

Próbuję uzyskać trzy elastyczne skrzynek dla dzieci, aby rozciągnąć za pomocą Flexbox, aby wypełnić kontener, tak aby wszystkie trzy pola były tej samej wielkości. Jednak nie chcę, aby pierwsze dwa wewnętrzne pola się rozciągały - zawsze chcę, żeby były tej samej wielkości. Trudno mi to wytłumaczyć, więc oto co chcę, żeby wyglądało tak:

Gdzie czerwone kwadraty są równe i mają stałą wysokość jak siebie nawzajem, to samo z niebieskimi polami (stosunek wysokości między czerwonymi i niebieskimi ramkami nie ważne), a zielona skrzynka to ta, która rozciąga się na jak największą największą czarną skrzynkę. Więc chcę uniknąć coś takiego, na przykład:

Oto JSFiddle: http://jsfiddle.net/agentemi1y/ssxu5moy/

Oto podstawowe 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; 
} 

UWAGA: Nie mogę ustawić stałej wysokości dla trzech czarnych skrzynek, ponieważ wtedy, jeśli wszystkie trzy pola zawierają tylko jedną ikonę, będzie to wyglądać głupio.

Answer 1

Zapomniałem dokładnie, skąd się tu wziąłem, ale wydaje mi się, że this jsfiddle robi to, co chcesz. . (Myślę, że przede wszystkim właśnie usunięto kilka odcinku i dodaje prostszą składnię flex: 0/flex: 1 :)