How can I send an inner <div> to the bottom of its parent <div>?

Question

The div inside another div picture and code below. Because there will be text and images of the parent div. And red div will be the last element of the parent div.

<div style="width: 200px; height: 150px; border: 1px solid black;">     <div style="width: 100%; height: 50px; border: 1px solid red;">     </div> </div> 

Answer 1

This is one way

<div style="position: relative;              width: 200px;              height: 150px;              border: 1px solid black;">      <div style="position: absolute;                  bottom: 0;                  width: 100%;                  height: 50px;                  border: 1px solid red;">     </div> </div> 

But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).

If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both".

Answer 2

A flexbox way.

HTML:

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

CSS:

.parent {   display: flex;   flex-direction: column;   justify-content: space-between; }  /*  not necessary, just to visualize it */  .parent {   height: 500px;   border: 1px solid black; }   .parent div {   border: 1px solid red; } 

Edit:

Source - Flexbox Guide

Browser support for flexbox - Caniuse