Deep Analysis of CSS max-height Percentage Calculation: Why Child Elements Overflow Parent Containers

Problem Phenomenon and Background

In CSS layout, developers often encounter a seemingly contradictory behavior: a child element with max-height: 100% overflows the parent container's boundaries when the parent has only max-height defined without an explicit height. The root cause of this behavior lies in the calculation rules for percentage heights in the CSS specification.

Specification Analysis and Calculation Mechanism

According to the W3C CSS 2.1 specification, when a child element uses a percentage value for max-height, that percentage is calculated relative to the parent's actual height, not the parent's max-height limit. This rule also applies to the max-width property.

When the parent element lacks an explicit height, its actual height is determined by its content. In this case, the child's max-height: 100% has no clear reference base, causing it to compute to none, meaning the child's height is unconstrained. The only constraint comes from the parent's max-width, leading to images with high aspect ratios exceeding the container's height while maintaining their proportions.

Code Example Analysis

Consider a typical scenario: a container with max-height: 200px and max-width: 200px contains an image sized 400×500 pixels, with the image set to max-height: 100% and max-width: 100%.

.container {
  background: blue;
  padding: 10px;
  max-height: 200px;
  max-width: 200px;
}

img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

In this configuration, since the container has no explicit height, the image's max-height: 100% is ineffective. The image height is calculated based on max-width: 100% and its aspect ratio, ultimately exceeding the container's height.

Solutions and Practices

The most direct solution is to set an explicit height for the parent container:

.container {
  background: blue;
  padding: 10px;
  max-height: 200px;
  max-width: 200px;
  height: 200px; /* Key fix */
}

img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

By explicitly specifying height: 200px, the parent's actual height is fixed, allowing the child's max-height: 100% to correctly compute to 200px, effectively constraining the image size.

Alternative Approaches and Advanced Techniques

Beyond setting an explicit height, consider using the inherit keyword:

.container {
  background: blue;
  padding: 10px;
  max-height: 200px;
  max-width: 200px;
}

img {
  max-height: inherit;
  max-width: inherit;
}

This approach allows the child to directly inherit the parent's max-height and max-width values, which may align better with expectations in some scenarios, though browser compatibility and specific layout needs should be considered.

Summary and Best Practices

Understanding the calculation basis for CSS percentage heights is key to avoiding such layout issues. When precise control over child element dimensions is needed, prioritize setting an explicit height for the parent or using other reliable constraint mechanisms. For responsive layouts, combine viewport units, Flexbox, or Grid layout with modern CSS techniques to achieve more flexible and stable size control.