Extend element to bottom of screen with vertical offset - html

Question

I have a simple layout which I took from MDN's flexbox page. It has a header and a main content area.
<header>header</header>
<div id='main'>
<article>article</article>
<aside>aside</aside>
</div>
I would like to have the main content area extend to the bottom of the viewport or further if it needs to accommodate its children. I tried fiddling with flexbox but I still can't specify that I want it to take up all space vertically like I can horizontally.
The only two options I can think of are:
A) Javascript to calculate the required height
B) Tiling a background image on the body to make it appear as though the content area is extended all the way down
Can anyone think of an alternatives to fill up the viewport and also contain children if the children extend past the bottom of n the screen?
https://jsfiddle.net/1cpcsvjr/5/
** Update ** I amended my jsfiddle with more content in the article sub element. The content will bleed out of the flex container.

Answer 1

#main
{
height: 100vh;
}
100vh means 100% of the viewport height, you can change this value if you need to.

Answer 2

you can set height to html an body to fill entitre window and use flex from body as well.
body {
font: 24px Helvetica;
background: #999999;
display:flex;
flex-flow: column;
}
html, body {
height:100%;
margin:0;
}
#main {
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
flex:1;/* fills entire space avalaible (or share evenly if sibblings)*/
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
header {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
<header>header</header>
<div id='main'>
<article>article</article>
<aside>aside</aside>
</div>
https://jsfiddle.net/1cpcsvjr/2/

Answer 3

Flexbox solution.
You have to set the html & body elements to 100% height.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
font: 24px Helvetica;
background: #999999;
min-height: 100%;
display: flex;
flex-direction: column;
}
#main {
margin: 0px;
padding: 0px;
flex: 1;
background: pink;
display: flex;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
header {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
<header>header</header>
<div id='main'>
<article>article</article>
<aside>aside</aside>
</div>