Sometimes, we want to fix child inside parent with min-height: 100% not inheriting height with CSS.
In this article, we’ll look at how to fix child inside parent with min-height: 100% not inheriting height with CSS.
How to fix child inside parent with min-height: 100% not inheriting height with CSS?
To fix child inside parent with min-height: 100% not inheriting height with CSS, we use flexbox.
For instance, we write
<div id="container">
<div id="container-shadow-left">Hello World!</div>
</div>
to add the nested divs.
Then we write
#container {
min-height: 100%;
display: flex;
flex-direction: column;
}
#container-shadow-left {
flex: 1;
}
to make the container a flex container with display: flex;
.
We set its flex direction to vertical with flex-direction: column;
.
Then we the inner div stretch to fit the container with flex: 1;
.
Conclusion
To fix child inside parent with min-height: 100% not inheriting height with CSS, we use flexbox.