Home >Web Front-end >CSS Tutorial >Why Doesn't My Child Element Inherit Height When the Parent Only Has `min-height`?

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

Linda Hamilton
Linda HamiltonOriginal
2024-12-26 08:13:12506browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn