Pourquoi un élément enfant avec « hauteur max : 100 % » déborde-t-il sur son parent avec « hauteur max » mais pas avec une hauteur explicite ?

Enfant débordant avec une hauteur maximale : 100 %

Cette enquête examine un comportement inattendu : un élément enfant avec une hauteur maximale définie sur 100 % déborde de son conteneur parent, même si le parent utilise également max-height. Cependant, ce débordement est évité lorsque le parent se voit attribuer une hauteur explicite.

Comprendre le problème

Normalement, lorsque la hauteur maximale est spécifiée sous forme de pourcentage sur un enfant élément, il représente un pourcentage de la taille réelle du parent. Cependant, en l'absence d'une taille explicite pour le parent, la taille maximale de l'enfant devient indéfinie, lui permettant de dépasser la taille maximale du parent.

Impact sur le débordement

Dans ce scénario spécifique, le parent a une hauteur maximale : 200 px, tandis que l'enfant a une hauteur maximale : 100 %. Lorsqu'une hauteur explicite n'est pas fournie pour le parent, sa hauteur réelle reste indéfinie. En conséquence, la taille maximale de l'enfant est nulle, ce qui lui permet de grandir indéfiniment. Étant donné que le contenu de l'enfant (une image dont la hauteur est supérieure à sa largeur) ne peut pas tenir dans la largeur maximale du parent, il déborde vers le bas.

Solution : hauteur parent explicite

Pour éviter ce débordement, une hauteur explicite (par exemple 200px) doit être donnée à l'élément parent. Cela établit un point de référence clair pour le calcul de la taille maximale de l'enfant, garantissant qu'elle ne dépasse pas la taille réelle du parent et reste dans sa contrainte de hauteur maximale.

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!