How to make absolute positioned div expand parent div height with CSS?

Sometimes, we want to make absolute positioned div expand parent div height with CSS.

In this article, we’ll look at how to make absolute positioned div expand parent div height with CSS.

How to make absolute positioned div expand parent div height with CSS?

To make absolute positioned div expand parent div height with CSS, we replace position with flexbox.

For instance, we write

<div class="parent">
  <div style="background-color: lightgrey">
    <p>I stay on top on desktop and I'm on bottom on mobile</p>
  </div>
  <div style="background-color: grey">
    <p>I stay on bottom on desktop and I'm on top on mobile</p>
  </div>
</div>

to add nested divs.

Then we write

.parent {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}

to make the outer div a flex container with display: flex;

We make its flex direction vertical with flex-direction: column;.

Then we add a media query that changes the flex direction to column-reverse to reverse the order of the items when the screen’s width is 768px or less.

Conclusion

To make absolute positioned div expand parent div height with CSS, we replace position with flexbox.