Problème de hauteur des Flexbox imbriquées

Question

J'essaie de me familiariser avec le système Flexbox. Je ne l'ai jamais vraiment utilisé auparavant et je vous prie de m'excuser si je rate quelque chose de très élémentaire.

J'ai créé un CodePen et simplifié en revenant à l'essentiel pour montrer mon problème.

Ma colonne de gauche contiendra très probablement plus de contenu que celle de droite, mais en utilisant la boîte de flexion, j'obtiens qu'elles soient toutes deux de la même hauteur, ce qui est parfait.

J'aimerais que la colonne de droite contienne plusieurs sous-éléments, mais je voudrais qu'ils occupent toute la hauteur entre eux, ce qui est mon problème.

J'ai codé en dur quelques éléments pour faciliter l'exemple. height:400px;

/*uncomment this line to see desired effect*/ //height:184px;

Answer 1

Lorsque vous inspectez les éléments, vous voyez que les éléments voitures ont 2 parents .card-content et .flex-container-2 mais ils n'ont pas de style spécifique et leur hauteur est déterminée uniquement par le contenu qu'ils contiennent. Pour résoudre ce problème, vous devez définir la hauteur à 100 % :

.card-content,.flex-container-2 {height: 100%;}

Voici l'exemple complet de fonctionnement :

body {
    background: #000;
}

.card-content,.flex-container-2 {height: 100%;} /* My addition */

.flex-container {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    display: flex;
    align-items: stretch;
    flex-flow: row wrap;
    justify-content: space-between;      
}

.flex-container-2 {
  display: flex;
  align-items: stretch;
  flex-flow: row wrap;
  justify-content: space-between;      
}

.flex-item {
  display: flex;
  flex: 2 1 auto;
  padding: 0.5em;
  align-items: stretch;
}

.card-1 {
  background:grey;
  height:400px;
  width:300px;
}
.card-2 {
  width:300px;
  background:lightgrey;
}

.sub-card {
  width:100%;
  background:lightblue;

  /*uncomment this line to see desired effect*/
  //height:184px; 
}

<div class="flex-container">

  <div class="flex-item">
    <div class="card card-1">    
      <div class="card-content">
      <h1>Title</h1>
            <p>Lorem ipsum!</p>
        </div>
    </div>
  </div>

  <div class="flex-item">
    <div class="card card-2">    
      <div class="card-content">
      <div class="flex-container-2">

          <div class="flex-item">
            <div class="card sub-card">    
              <div class="card-content">
              <h2>subtitle1</h2>
                    <p>text one</p>
                </div>
            </div>
          </div>

        <div class="flex-item">
            <div class="card sub-card">    
              <div class="card-content">
              <h2>subtitle2</h2>
                    <p>text two</p>
                </div>
            </div>
          </div>

        <div class="flex-item">
            <div class="card sub-card">    
              <div class="card-content">
              <h2>subtitle3</h2>
                    <p>text three</p>
                </div>
            </div>
          </div>

        <div class="flex-item">
            <div class="card sub-card">    
              <div class="card-content">
              <h2>subtitle4</h2>
                    <p>text four</p>
                </div>
            </div>
          </div>

</div>
    </div>
  </div>

</div>