Comment étirer un enfant Flex pour remplir la hauteur du conteneur

Lorsque vous travaillez avec Flexbox, il est courant de rencontrer le problème où un élément enfant ne s'étend pas sur toute la hauteur de son contenant. Cela est souvent dû à une utilisation incorrecte de la propriété height: 100%.

Dans Flexbox, la propriété height: 100% peut être problématique car :

• L'élément parent a besoin d'un élément fixe height, ce qui va à l'encontre des principes de Flexbox.
• Lorsque plusieurs enfants sont présents, utiliser height : 100 % sur un enfant ignorera les autres.

La solution est de supprimer le height : propriété 100 % et s'appuie sur le comportement par défaut de Flexbox. Par défaut, les éléments flexibles dans le sens d'une ligne (la disposition typique) s'alignent verticalement avec la propriété align-items: stretch. Cela signifie que l'élément enfant s'étirera automatiquement pour remplir la hauteur disponible du conteneur.

Voici un exemple qui démontre l'utilisation correcte sans hauteur : 100 % :

  

  

    some

    cool

    text
  

Dans cet exemple, l'enfant jaune s'étirera pour remplir la hauteur du conteneur, quelle que soit la hauteur du texte de l'enfant bleu. En effet, la valeur par défaut align-items: stretch garantit que les éléments flexibles sont étirés verticalement pour occuper l'espace disponible.