Comment faire en sorte que les enfants Flexbox occupent toute la hauteur de leur conteneur parent ?

Comment faire en sorte que les enfants Flexbox aient la même taille que leur parent

Lorsque vous travaillez avec Flexbox, vous pouvez rencontrer des difficultés pour que les éléments enfants remplissent tout l'espace vertical de leur conteneur parent . Cela peut être particulièrement frustrant si vous souhaitez que les éléments enfants fassent 100 % de la taille du parent.

Configuration du conteneur parent Flexbox

Voici une version simplifiée de votre HTML et CSS code :

HTML :

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

CSS :

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

Solution : aligner les éléments : stretch

Pour résoudre ce problème sans recourir à un positionnement absolu ni régler la hauteur de l'élément flex-2 à 100 %, vous pouvez utiliser la propriété align-items: stretch sur le conteneur parent flex-2.

.flex-2 {
  display: flex;
  align-items: stretch;
}

Note sur la propriété Height

C'est crucial pour supprimer la propriété height: 100% de l'élément flex-2-child. Cela garantira que l'élément enfant s'étend verticalement dans le conteneur parent.

Alternative : align-self

Une autre option consiste à utiliser align-self : stretch on l'élément enfant spécifique dont vous souhaitez remplir la hauteur.

.flex-2-child {
  align-self: stretch;
}

Cette méthode vous donne plus de contrôle sur chaque enfant éléments.

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!