Pourquoi un élément enfant avec « hauteur max : 100 % » déborde-t-il de son parent lorsque la hauteur du parent n'est pas explicitement définie ?

Enfant avec une hauteur maximale : 100 % dépasse la taille du parent

Dans un scénario inattendu, un élément enfant avec une hauteur maximale : 100 % déborde de son conteneur, bien que celui-ci ait également une hauteur maximale. Cet écart se produit lorsque la hauteur du conteneur n'est pas explicitement définie.

Plonger dans l'explication

Lors de la spécification de la hauteur maximale sur un élément enfant sous forme de pourcentage, elle fait référence à la hauteur réelle du parent, pas sa hauteur maximale. En l'absence d'une hauteur de conteneur explicite, ce calcul de pourcentage n'en donne aucune, permettant effectivement à l'enfant de grandir indéfiniment.

La seule contrainte restante de l'enfant est la largeur maximale de son parent. Comme l'image est plus haute que large, elle déborde de la hauteur du conteneur pour conserver ses proportions tout en maximisant sa taille.

Résolution avec la hauteur parent explicite

Lorsque la taille du parent est explicitement définie, la hauteur maximale de l'enfant est correctement contrainte à 100 % de la valeur spécifiée. Cela garantit que l'enfant reste à la hauteur du conteneur tout en respectant son rapport hauteur/largeur. Ainsi, définir une hauteur parent explicite est nécessaire pour éviter que l'enfant ne déborde de son parent lors de l'utilisation de max-height : 100 %.

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!