Maison > Article > interface Web > Pourquoi mon Flex Child ne remplit-il pas la hauteur du conteneur ?
Comment étirer un enfant flexible 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 :
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 % :
<code class="html"><div style='display: flex'> <div style='background-color: yellow; width: 20px'></div> <div style='background-color: blue'> some<br> cool<br> text </div> </div></code>
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.
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!