html - Extend element to bottom of screen with vertical offset -

i have simple layout took mdn's flexbox page. has header , main content area.

<header>header</header> <div id='main'>   <article>article</article>   <aside>aside</aside> </div> 

i have main content area extend bottom of viewport or further if needs accommodate children. tried fiddling flexbox still can't specify want take space vertically can horizontally.

the 2 options can think of are:

a) javascript calculate required height

b) tiling background image on body make appear though content area extended way down

can think of alternatives fill viewport , contain children if children extend past bottom of n screen?

https://jsfiddle.net/1cpcsvjr/5/

** update ** amended jsfiddle more content in article sub element. content bleed out of flex container.

#main {    height: 100vh; } 

100vh means 100% of viewport height, can change value if need to.