Pourquoi mon élément enfant déborde-t-il de son parent alors que les deux ont une « hauteur maximale : 100 % » ?

Parent débordant d'enfant malgré une hauteur maximale de 100 %

Considérez une situation dans laquelle vous avez un élément enfant avec une hauteur maximale de 100 % à l'intérieur d'un conteneur qui également utilise la hauteur maximale. De manière inattendue, l'élément enfant finit par déborder de l'élément parent.

Comprendre le comportement

Le problème vient du fait que lorsque vous définissez un pourcentage pour la hauteur maximale sur un enfant, il fait référence à un pourcentage de la taille réelle du parent, et non à sa hauteur maximale. Ainsi, lorsque l'élément parent n'a pas de hauteur explicite définie, il n'y a pas de hauteur de base définie pour le calcul de la hauteur maximale de l'élément enfant. Par conséquent, max-height est par défaut "aucun", permettant à l'élément enfant de croître indéfiniment.

Dans ce cas, la seule restriction sur l'enfant est la largeur maximale de son parent. Étant donné que l'image est plus haute que large, elle déborde de la hauteur du conteneur vers le bas pour conserver son rapport hauteur/largeur tout en maximisant sa taille globale.

Solution : hauteur explicite

Pour résoudre ce problème, il vous suffit de fournir une hauteur explicite à l'élément parent. Ce faisant, vous établissez une hauteur de base claire pour le calcul de la hauteur maximale de l'élément enfant. Par conséquent, l'élément enfant sera confiné à la hauteur du parent tout en conservant ses proportions.

Par conséquent, spécifier une hauteur explicite pour l'élément parent garantit que l'élément enfant respecte sa restriction de hauteur maximale, empêchant éviter de déborder du récipient.

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!