Can't push buttons to bottom of page in CSS - css

Question

Been awhile since I played with Flexbox. I'm trying to push the buttons to the bottom of the page. Does the parent container always have to have a size to do that? That seems to be the only way I can get the result I want, but then I have to constantly resize based on what else is on the page. What else am I doing wrong?
.all {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<h2>My lists</h2>
<div class="all">
<div class="top"><button>Top</button></div>
<div class="middle"><button>Midde</button></div>
<div class="bottom"><button>Bottom</button></div>
</div>

Answer 1

Instead of using justify-content: flex-end; try to use justify-content: space-between;so that each element will be spread.
Also you need to set a min-height in the .alt class or the container in order to see the space-between in action.

Answer 2

As you mentioned in your question, you need to define a height from the area you want to align the elements.
Wrap your container
You need to define your parent container as
to make the elements inside don't overflow the box itself. For that use:
flex-wrap: wrap
Make the elements inside your container use the full width
By default flex will shrink the elements. to remove the defaults and use 100% of the width, use
flex: 0 0 100%
Make your elements align itself
This is the key for your question. the elements needs to be aligned not with the other boxes, they have to align themselves. For that you must use align-self: flex-start, align-self: center or align-self: flex-end
Minimal Example
.all {
display: flex;
min-height: 100vh;
flex-wrap: wrap;
}
/* This is going to make full width the divs inside .all */
.all div {
flex: 0 0 100%;
}
.top {
align-self: flex-start;
}
.middle {
align-self: center;
}
.bottom {
align-self: flex-end;
}
<div class="all">
<div class="top"><button>Top</button></div>
<div class="middle"><button>Middle</button></div>
<div class="bottom"><button>Bottom</button></div>
</div>