Align child to the bottom of the parent in CSS (Flexbox)

Question

I am using flexbox and I am trying to align a child division to the bottom of a parent division. I can't find a solution. Here's an example of what I tried.

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

.top {
    height: 70%;
}

.bottom {
    height: 30%;
    justify-content: flex-end;
}

<div class='container'>
    <div class='top'>
        <p>Content to go on top</p>
    </div>
    <div class='bottom'>
        <p>Content to go on bottom</p>
    </div>
</div>

This is what I end up with: I am trying to make that happen to the left sidebar

Answer 1

You need to make .bottom a flex container to be able to use justify-content

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
  border:1px solid;
}

.top {
  height: 70%;
  border:1px solid;
}

.bottom {
  height: 30%;
  display: flex; /*added this*/
  flex-direction: column; /*added this*/
  justify-content: flex-end;
  border:1px solid;
}

<div class='container'>
  <div class='top'>
    <p>Content to go on top</p>
  </div>
  <div class='bottom'>
    <p>Content to go on bottom</p>
  </div>
</div>