Why Doesn't `height: 100%` Work on a Child Element Without a Parent Height When Using `min-height` or `max-height`?

Why height: 100% on a Child Doesn't Apply Without a Height Value on Parent with Min-/Max-Height

In certain scenarios, when a child element is set to height: 100% and its parent element has a min-height or max-height value but no explicit height value, the child may not inherit the desired height. Let's delve into the reason behind this behavior with HTML, CSS, and relevant CSS specifications.

Consider the following HTML and CSS code:

<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%;
}

Problem:

In the above example, when you view this document in a browser, you may notice that the child element does not fill the entire container. Despite the container having a min-height of 300px and the child having a height of 100%, the child element remains empty (without any visible height).

Explanation:

This behavior stems from the CSS specification. The specification states that:

"Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'."

In our case, the container's height is not explicitly specified. It is determined by its content, which in this case is just the child element. Since the child element has no explicit height (due to the percentage height), the container's height is essentially undefined. Consequently, the percentage height of the child also becomes undefined.

To resolve this issue and ensure that the child element fills the entire container, you must explicitly set a height value for the container, as seen in the following modified CSS:

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

By setting the container's height to even a small value (in this case, 1px), you effectively provide a reference height for the child element's percentage height. This allows the child element to correctly inherit the container's height, ensuring it fills the entire container.

The above is the detailed content of Why Doesn't `height: 100%` Work on a Child Element Without a Parent Height When Using `min-height` or `max-height`?. For more information, please follow other related articles on the PHP Chinese website!