Pourquoi un élément enfant déborde-t-il avec « hauteur maximale : 100 % » lorsque le parent a une « hauteur maximale » ?

Problème de débordement inattendu avec une hauteur maximale : 100 %

Dans l'exemple donné, un élément enfant avec une hauteur maximale de 100 % fait déborder le conteneur parent avec une hauteur maximale spécifiée. Ce comportement apparemment inattendu soulève des questions sur la nature de la hauteur maximale dans un tel scénario.

Le nœud du problème réside dans le calcul de la hauteur maximale sur l'élément enfant. Lorsque la hauteur maximale est définie sous forme de pourcentage, elle est interprétée comme un pourcentage de la hauteur réelle du parent, plutôt que comme sa hauteur maximale. En l'absence d'une taille explicite spécifiée pour le parent, la taille réelle du parent n'est pas définie et donc la hauteur maximale de l'enfant est par défaut nulle.

En l'absence de hauteur maximale imposée à l'enfant, il est libre de développer dans toute l'étendue de son contenu. Dans le cas d'une image, qui a généralement un rapport hauteur/largeur vertical supérieur à son rapport hauteur/largeur horizontal, l'image déborde de la hauteur du conteneur vers le bas tout en conservant son rapport hauteur/largeur inhérent.

La solution à ce comportement inattendu consiste à explicitement définir une hauteur pour l'élément parent. Ce faisant, un point de référence de hauteur fixe est établi pour le calcul de la taille maximale de l'enfant. Cela garantit que l'enfant reste dans la limite de hauteur spécifiée tout en conservant son rapport hauteur/largeur, évitant ainsi tout débordement.

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!