Why Does a Child Element Overflow with `max-height: 100%` When the Parent Has a `max-height`?

Unexpected Overflow Issue with max-height: 100%

In the given example, a child element with a max-height of 100% overflows the parent container with a specified max-height. This seemingly unexpected behavior raises questions about the nature of max-height in such a scenario.

The crux of the issue lies in the calculation of max-height on the child element. When max-height is set as a percentage, it is interpreted as a percentage of the parent's actual height, rather than its max-height. In the absence of an explicit height specified for the parent, the parent's actual height is undefined and thus the max-height of the child defaults to none.

With no maximum height enforced on the child, it is free to grow to the full extent of its content. In the case of an image, which typically has a vertical aspect ratio greater than its horizontal aspect ratio, the image overflows the container's height downwards while maintaining its inherent aspect ratio.

The solution to this unexpected behavior is to explicitly define a height for the parent element. By doing so, a fixed height reference point is established for the child's max-height calculation. This ensures that the child remains within the specified height limit while still maintaining its aspect ratio, preventing any overflowing.

The above is the detailed content of Why Does a Child Element Overflow with `max-height: 100%` When the Parent Has a `max-height`?. For more information, please follow other related articles on the PHP Chinese website!