Comment faire en sorte qu'un élément enfant Flexbox remplisse 100 % de la hauteur de son parent ?

Hauteur de l'enfant Flexbox : atteindre 100 % de remplissage par les parents

Dans le monde de Flexbox, remplir l'espace vertical des éléments enfants pose un défi commun . Considérons l'extrait de code que vous avez fourni :

.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;
}

Dans ce scénario, l'élément flex-2-child ne parvient pas à occuper tout l'espace vertical de son conteneur parent, sauf lorsque flex-2 a une hauteur de 100. % ou lorsque flex-2-child a une position absolue. Cependant, les deux solutions présentent leurs propres inconvénients.

La solution : Align-Items Stretch

Une solution de contournement efficace consiste à utiliser la propriété align-items sur le conteneur parent ( flex-2) :

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

Notez que la hauteur : 100% ; La propriété doit être supprimée du composant enfant (flex-2-child).

Cette approche demande à l'élément flex-2-child de s'étirer verticalement, remplissant l'espace disponible dans son conteneur parent. Il fonctionne à la fois dans Chrome et Firefox.

Comme alternative à align-items, vous pouvez appliquer align-self spécifiquement à l'élément flex-2-child que vous souhaitez étirer :

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

En utilisant l'une ou l'autre technique, vous pouvez obtenir le comportement souhaité consistant à ce que les enfants Flexbox remplissent toute la hauteur de leurs éléments parents.

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!