Pourquoi ma colonne Flexbox enfant ne remplit-elle pas 100 % de la hauteur dans Chrome ?

Hauteur 100 % sur la colonne flexbox enfant

Votre problème provient d'un conflit dans la spécification flexbox, qui affecte la façon dont les pourcentages de hauteur sont calculés dans Chrome. Selon la spécification flexbox, lorsque align-self est défini sur stretch (valeur par défaut pour les éléments flex), il ajuste la valeur utilisée de la propriété cross-size d'un élément (hauteur dans ce cas). Cependant, les pourcentages fonctionnent en fonction de la valeur spécifiée de la propriété cross-size du parent, et non de la valeur utilisée.

Dans votre exemple, le CSS de l'élément .flex est défini sur flex: 1, ce qui signifie qu'il ' occupera tout l’espace disponible. L'élément .flex-child a un paramètre de hauteur de 100 %, ce qui signifie qu'il occupera 100 % de la hauteur disponible, calculée en fonction de la hauteur spécifiée du parent flex. Cependant, la hauteur de .flex n'est pas explicitement définie, elle est donc par défaut auto. Par conséquent, Chrome interprète la hauteur .flex-child comme 100 % de auto, c'est pourquoi il ne remplit pas l'intégralité de l'élément .flex.

Pour résoudre ce problème, vous devez :

1. Définissez .flex pour afficher : flex ; pour s'assurer qu'il est reconnu comme conteneur flexible.
2. Supprimez la hauteur : 100 % ; déclaration de .flex-child.

Cela permettra à .flex-child de remplir toute la hauteur de son élément parent .flex.

Cependant, cette solution peut ne pas fonctionner si vous Nous essayons de remplir seulement une partie de .flex. Dans de tels cas, vous devrez utiliser une solution de contournement, comme ajouter un deuxième enfant .spacer à .flex avec flex: 1 et définir .flex-child sur flex: 9. Bien qu'il s'agisse d'une option moins élégante, c'est une solution de contournement à résoudre la particularité des spécifications.

Il convient de noter que ce problème est spécifique à Chrome et peut ne pas se produire dans d'autres navigateurs. On espère que les futures mises à jour de la spécification flexbox résoudront cette incohérence et amélioreront la compatibilité entre navigateurs.

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!