Comment remplir l'espace vertical restant dans un conteneur avec CSS Flexbox ?

Remplir l'espace vertical restant avec #second

Afin de remplir l'espace vertical restant du #wrapper sous #first avec #second div en utilisant CSS seul, vous pouvez utiliser les étapes suivantes :

1. Définissez le HTML et le corps pour qu'ils occupent 100 % de hauteur sans marges.
2. Attribuez display: flex, flex-direction: column à la conteneur parent .wrapper.
3. Donnez la hauteur spécifique à .first.
4. Définissez flex-grow : 1 à .second pour l'étirer pour occuper l'espace restant.

Voici le code CSS :

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!