Q:

Fill out rest of screen

I want a simple page where i have a main section and a left sidebar with two sections. I dont know the height of the top section, and I want to bottom section to fill out the rest of the screen. As you can see on the fiddle below (try to resize the window if you cant see the sidebar), height 100% sets the hight of the bar plus the it own height and I want it to only fill out the rest of the space. I found other questions in here where people propose to use vh minus top bar, but I dont know the hight of the top bar. Is there other options?
Notice the bottom section must support scrolling if content exeeds the screen height.
https://jsfiddle.net/segato/agprcbg0/2/
html,
body,
.wrapper,
.wrapper-inner,
.sidebar,
.main {
   height: 100%;
  }

A:

You can do it with the Flexbox. The whole point is to make the #bottom div flexible so that it can take up all the remaining vertical space.
Updated Fiddle

