Why Doesn't My Child Div Fill 100% Height When the Parent Only Has `min-height`?

Height and Percentage Calculations in Parent-Child Elements

Consider the following HTML and CSS setup:

<div class="container">
  <div class="child">
  </div>
</div>

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

Child Height Not Responding

When the container element has a min-height value, the child element's height remains 0 despite the 100% specification. However, setting the height of the container element even to a small value like 1px allows the child element to fill the container.

Understanding the Behavior

The reason for this behavior lies in the nature of height calculations in CSS. When a parent element does not have an explicitly defined height (such as in the case of min-height), its height is determined by its content. In this case, its content is the child element.

However, the height of the child element, set to 100%, is calculated relative to the height of its containing block. As the containing block (the parent element) does not have an explicitly specified height, the child element's height cannot be calculated.

Defining Height Explicitly

Setting the height of the parent element, even to a small value, provides a definitive height for the containing block. This allows the child element to calculate its height as 100% of the parent's height.

Key Takeaway:

Percentage height calculations require an explicitly defined height for the containing block. In cases where the containing block has a min-height/max-height value but no height value, the child element's height will not be applied until the containing block's height is explicitly defined.

The above is the detailed content of Why Doesn't My Child Div Fill 100% Height When the Parent Only Has `min-height`?. For more information, please follow other related articles on the PHP Chinese website!