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

Overflowing Child with max-height: 100%

This inquiry examines an unexpected behavior: a child element with max-height set to 100% overflows its parent container, despite the parent also using max-height. However, this overflow is prevented when the parent is assigned an explicit height.

Understanding the Issue

Normally, when max-height is specified as a percentage on a child element, it represents a percentage of the parent's actual height. However, in the absence of an explicit height for the parent, the child's max-height becomes undefined, allowing it to exceed the parent's max-height.

Impact on Overflow

In this specific scenario, the parent has max-height: 200px, while the child has max-height: 100%. When an explicit height is not provided for the parent, its actual height remains undefined. As a result, the child's max-height computes to none, allowing it to grow indefinitely. Since the child's content (an image with a height greater than its width) cannot fit within the parent's max-width, it overflows downward.

Solution: Explicit Parent Height

To prevent this overflow, an explicit height (e.g., 200px) must be given to the parent element. This establishes a clear reference point for the child's max-height calculation, ensuring it does not exceed the parent's actual height and stays within its max-height constraint.

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