Can I make a flexbox and therefore its children inherit the screen's height and in doing so, make the last child stick to bottom? - css

Question

There's a certain peculiarity about flexbox that I both understand and don't understand:
If I am to declare the following:
#container {
display: flex;
border: 1px solid gray;
flex-direction: column;
}
.one {
height: 100px;
width: 100px;
background-color: red;
display: block;
}
.two {
height: 100px;
width: 100px;
background-color: green;
display: block;
}
<div id="container">
<div class="item one"></div>
<div class="item two"></div>
</div>
The container will basically inherit the height of whatever children it has.
Now here's the thing: almost every single layout out there has the main container, the "everything goes here" type of div.
But what happens now is that if the children themselves are not tall enough to push the last child to "stick to the bottom", you'll have a layout looking like this:
But the problem here is that if you make the height of all the children be a percentage of the total height, then things become literally ugly really fast.
Why does flex choose to do this and how can we work around it?

Answer 1

I would keep the footer in it's separate div from the container at the very end.
<div class="content-main">
<div class="main-content">
</div>
</div>
<div class="footer-content">
</div>
If the wordpress template you are using is coded where the footer is inside the same container as main content. I would link to the site/and or test site, so we can better figure out the root cause because the image you posted does not show the browser window, so I cannot see exactly how big of a space on the bottom you have.