Home >Web Front-end >CSS Tutorial >Why Doesn't My Child Element Inherit Height When the Parent Only Has `min-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!