How to send an inner div to the bottom of its parent div with CSS?

Sometimes, we want to send an inner div to the bottom of its parent div with CSS.

In this article, we’ll look at how to send an inner div to the bottom of its parent div with CSS.

How to send an inner div to the bottom of its parent div with CSS?

To send an inner div to the bottom of its parent div with CSS, we use flexbox.

For instance, we write

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

to add nested divs.

Then we write

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.parent {
  height: 500px;
  border: 1px solid black;
}

.parent div {
  border: 1px solid red;
}

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

Then we make its flex direction vertical with flex-direction: column;.

And then we use justify-content: space-between; to spread the child divs out vertically.

Conclusion

To send an inner div to the bottom of its parent div with CSS, we use flexbox.