Obtention d'une colonne flex-box pour remplir l'espace disponible

Question

J'ai essayé de faire en sorte que css flex box fonctionne correctement pour remplir les éléments dans la boîte flexible de la colonne.

Fondamentalement, je veux que ce code pour espacer uniformément les deux pièces flexibles à chacun occupent 50% de la hauteur disponible. Si je règle manuellement la hauteur à 50% cela fonctionne, mais cela semble être la solution incorrecte, car je pensais que c'est ce que flex réglage: 1 était censé faire.

J'ai lu le guide ici: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ et j'ai essayé les différents align-self, flex-grow, align-content pour voir si ceux-ci le répareraient, mais jusqu'à présent je n'ai pas eu de chance. Je suis sûr qu'il me manque quelque chose de simple, mais je n'ai tout simplement pas été capable de le comprendre, et lire les autres questions sur le débordement de la pile ne m'a pas aidé à comprendre ce que je fais de façon incorrecte .

.flex { 
 
    display: flex; 
 
} 
 

 
.flex1 { 
 
    flex: 1; 
 
} 
 

 
.col-flex { 
 
    flex-flow: column nowrap; 
 
    justify-content: space-evenly; 
 
}

<div class="flex" style="height:200px"> 
 
    <div class="flex1"> 
 
    <div class="col-flex" style="height:100%;background-color:grey"> 
 
     <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div> 
 
     <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div> 
 
    </div> 
 
    </div> 
 
    <div class="flex1" style="background-color: red;"> 
 
    The flex on the row based flex works correctly; 
 
    </div> 
 
</div>

code complet ici: https://codepen.io/anon/pen/EwbLMM

Answer 1

Rendre le contenant un FlexBox aussi. Ajouter display: flex-col-flex - voir la démo ci-dessous:

.flex{ 
 
    display:flex; 
 
} 
 

 
.flex1{ 
 
    flex:1; 
 
} 
 

 
.col-flex{ 
 
    display: flex; /* ADDED */ 
 
    flex-flow: column nowrap; 
 
    justify-content: space-evenly; 
 
}

<div class="flex" style="height:200px"> 
 
    <div class="flex1"> 
 
    <div class="col-flex" style="height:100%;background-color:grey"> 
 
     <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div> 
 
     <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div> 
 
    </div> 
 
    </div> 
 
    <div class="flex1" style="background-color: red;"> 
 
    The flex on the row based flex works correctly; 
 
    </div> 
 
</div>