Obtenir une colonne flex-box pour remplir l'espace disponible

Question

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

En fait, je veux que le code permette d'espacer uniformément les deux pièces flexibles pour qu'elles occupent chacune 50 % de la hauteur disponible. Si je règle manuellement la hauteur à 50 %, cela fonctionne, mais cela ne semble pas être la bonne solution, car je pensais que c'était ce que le paramètre flex:1 était censé faire.

J'ai lu le guide ici : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ J'ai essayé les différentes options align-self, flex-grow, align-content pour voir si elles pouvaient résoudre le problème, 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 pas réussi à le découvrir, et la lecture des autres questions sur stack overflow ne semble pas m'aider à 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>

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

Answer 1

Faites du conteneur un flexbox aussi. Ajoutez display: flex a 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>