Maison > interface Web > tutoriel CSS > 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 ?

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 ?

Barbara Streisand
Libérer: 2024-12-24 07:00:14
original
771 Les gens l'ont consulté

Why Does a Child Element with `max-height: 100%` Overflow its Parent with `max-height` but Not with an Explicit Height?

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal