Pourquoi « hauteur : 100 % » ne fonctionne-t-il pas sur les enfants de colonne Flexbox dans Chrome ?

Hauteur 100 % ne fonctionne pas sur la colonne Flexbox enfant : bug spécifique au navigateur

Vous êtes confronté à un problème où les éléments enfants dans une colonne flexbox ne réagissent pas aux pourcentages de taille. Ce problème a été identifié dans Chrome et peut ne pas affecter les autres navigateurs.

Dans votre exemple de code :

• .flexbox est configuré pour s'afficher en tant que conteneur flexbox avec une direction de colonne.
• .flex est l'élément fléchi.
• .flex-child est l'élément enfant à l'intérieur .flex.

Lorsque vous définissez .flex-child sur hauteur : 100 %, il ne parvient pas à remplir l'espace vertical de son parent, .flex.

Solution :

Pour résoudre ce problème, apportez les modifications suivantes :

• Remplacez .flex par afficher sous forme de flexbox : .flex { display: flex; }.
• Supprimez la hauteur : 100 % style de .flex-child.

Cette modification permettra à l'élément .flex-child de remplir l'espace vertical disponible dans .flex.

Explication :

La spécification flexbox indique que align-self: stretch (la valeur par défaut pour les éléments fléchis) affecte uniquement la valeur utilisée de la propriété cross-size d'un élément (hauteur dans ce cas). Cependant, les pourcentages sont calculés en fonction de la valeur spécifiée de la propriété cross-size du parent, et non de sa valeur utilisée.

Étant donné qu'aucune hauteur n'est spécifiée pour .flex, la hauteur par défaut est "auto". Lorsque vous définissez .flex-child sur hauteur : 100 %, Chrome calcule la hauteur en fonction de la valeur spécifiée de .flex, qui est "auto". Par conséquent, .flex-child finit par avoir une hauteur de 0 car « auto » signifie « aussi grand que nécessaire ».

En modifiant .flex pour l'afficher sous forme de flexbox, vous définissez explicitement sa direction de flexion sur row. . Cela permet à .flex-child de remplir correctement la hauteur de .flex comme prévu.

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!