How to fix child inside parent with min-height: 100% not inheriting height with CSS?

Spread the love

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.

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;.

To fix child inside parent with min-height: 100% not inheriting height with CSS, we use flexbox.