내 flexbox flex-stretch 속성이 작동하지 않는 이유는 무엇입니까?

Question

3 개의 박스가 모두 같은 크기가되도록 flexbox를 사용하여 컨테이너를 채우기 위해 3 개의 flex 자식 박스를 늘리려고합니다. 그러나 상자 안의 처음 두 상자는 늘리지 않아야합니다. 항상 동일한 크기가되기를 바랍니다. 일종의 설명하기가 어려우므로 여기에 이렇게 보길 원합니다.

빨간색 상자는 모두 같은 높이와 고정 된 높이로 파란색 상자와 동일합니다 (빨간색 상자와 파란색 상자 사이의 높이 관계는 같지 않음). 중요), 녹색 상자는 가장 큰 검정 상자가 뻗어 있지만 큰 상자입니다. 그래서 예를 들어, 같은 것을 피하려고 :

여기

가 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 구문을 추가 생각 :