Why Doesn't My Child Element Inherit Height When the Parent Only Has `min-height`?

Child Element Height Not Applied with Parent min-height/max-height and No Explicit Height

Problem:

Consider the following CSS:

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

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

Despite the child element having a height set to 100%, it does not take up any height when the parent element has a min-height value but no explicit height. Only when the parent element's height is set to even 1px does the child element correctly fill the container.

Explanation:

In the first case (no explicit height for the parent), the percentage height of the child fails because:

According to the CSS specification:

"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'."

Min-height only provides a minimum boundary, and the height of the element still depends on its content.

To illustrate, consider the following modified example:

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

.child {
  background-color: blue;
  width: 500px;
  height: 400px;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  from {
    height: 100px;
  }
}

Here, the container explicitly sets a small padding, which forces the child element to have a smaller max-height than 300px. The animation dynamically changes the child's height, demonstrating that the child's height indeed depends on the available space and not solely on its 100% height setting.

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