warum ist nicht mein flexbox-flex-stretch-Eigenschaft arbeiten?

Ich versuche, die drei flex-Kinder-Boxen zu Strecken mit flexbox, den container zu füllen, so dass alle drei Boxen sind die gleiche Größe. Aber ich will nicht, dass die ersten beiden in Kartons zu dehnen - ich will immer, Sie werden die gleiche Größe. Schwierig zu erklären, also hier ist was ich wollen, dass es so Aussehen:

Wo die roten Kästchen sind alle gleich " und " Feste Höhe als jeder andere, das gleiche mit der blauen Kästen (Höhe Beziehung zwischen roten und blauen Kästen nicht wichtig), und der grüne Kasten ist der eine, der sich jedoch zu groß die größte black box ist. Also ich will etwas vermeiden, wie zum Beispiel:

Hier ein JSFiddle: http://jsfiddle.net/agentemi1y/ssxu5moy/

Hier ist die grundlegende 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;
}

HINWEIS: ich kann nicht eine Feste Höhe für die drei black-Boxen, weil dann, wenn alle drei Boxen haben nur ein Symbol, Sie werden dumm Aussehen.

InformationsquelleAutor der Frage agentem | 2014-11-14