tại sao tài sản flexbox flex-stretch của tôi không hoạt động?

Question

Tôi đang cố gắng để có được ba hộp trẻ em flex để kéo dài bằng cách sử dụng flexbox để điền vào các container để cả ba hộp có cùng kích thước. Tuy nhiên, tôi không muốn hai cái hộp đầu tiên căng ra - tôi luôn muốn chúng có cùng kích cỡ. Rất khó giải thích, vì vậy, đây là những gì tôi muốn nó trông giống như thế này:

Trường hợp các hộp màu đỏ bằng nhau và cố định chiều cao như nhau, cùng với hộp màu xanh (mối quan hệ chiều cao giữa hộp màu đỏ và màu xanh không quan trọng), và hộp màu xanh lá cây là một trong đó trải dài đến tuy nhiên lớn hộp đen lớn nhất là. Vì vậy, tôi muốn tránh một cái gì đó như thế này, ví dụ:

Dưới đây là một JSFiddle: http://jsfiddle.net/agentemi1y/ssxu5moy/

Dưới đây là html cơ bản:

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

LƯU Ý: Tôi không thể đặt chiều cao cố định cho ba hộp đen, vì sau đó nếu cả ba hộp chỉ có một biểu tượng trong đó, nó sẽ trông câm lặng.

Answer 1

Tôi quên chính xác cách tôi đến đó, nhưng this jsfiddle dường như làm những gì bạn muốn. (Tôi nghĩ rằng tôi chủ yếu chỉ cần loại bỏ một loạt các căng, và thêm cú pháp đơn giản hơn flex: 0/flex: 1. :)