Pourquoi « hauteur : 100 % » ne fonctionne-t-il pas sur une colonne enfant flexbox dans Chrome ?

Hauteur 100 % sur la colonne flexbox enfant ne fonctionne pas : un problème Chrome

Dans flexbox, il est prévu que les éléments enfants remplissent la hauteur disponible comme spécifié par la propriété height:100%. Cependant, ce comportement est interrompu dans Chrome lorsque l'élément parent est une colonne flexbox.

Dans l'exemple fourni, le code suivant vise à créer une disposition de colonne flexbox :

.flexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Et le L'élément enfant est défini pour remplir la hauteur disponible :

.flex-child {
  height: 100%;
}

Cependant, dans Chrome, l'élément enfant ne répond pas à la propriété height:100%, le laissant avec une hauteur indéfinie.

Solution :

Le problème peut être résolu en modifiant ce qui suit :

1. Définissez l'élément parent .flex pour afficher : flex. Il s'agit d'une étape cruciale qui demande explicitement au navigateur d'utiliser la disposition flexbox.
2. Supprimez la propriété height: 100% de l'élément enfant .flex-child. Cela élimine la confusion causée par le navigateur essayant d'appliquer la valeur de pourcentage à une hauteur parent non spécifiée.

Explication :

Flexbox suit les spécifications à la lettre . La valeur align-self: stretch, qui est la valeur par défaut pour les éléments fléchis, modifie uniquement la valeur "utilisée" de la propriété cross-size (dans ce cas, la hauteur), et non sa valeur "spécifiée". Les pourcentages, en revanche, sont calculés en fonction de la valeur spécifiée de la propriété cross-size du parent.

Étant donné que .flex n'a pas de hauteur spécifiée, essayez de définir la hauteur : 100 % sur .flex- child donne 100 % de la taille non spécifiée de .flex, ce qui est essentiellement "auto". Cela amène le navigateur à mal interpréter l'intention.

En définissant .flex sur display: flex, nous forçons le navigateur à utiliser la disposition flexbox, garantissant que les éléments sont correctement disposés. De plus, la suppression de la propriété height: 100% sur .flex-child permet à l'élément d'hériter de la hauteur spécifiée de son parent, .flex.

Limitations :

While cette solution fonctionne pour remplir tout l'espace de .flex, elle peut ne pas fonctionner si seule une partie de .flex est destinée à être remplie. Dans de tels cas, une solution de contournement utilisant un positionnement absolu ou plusieurs enfants flexbox peut être nécessaire.

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!