Flex box top with bottom filling the remainder

[fooman]

I’m trying to make a page that has a top and bottom portion. I basically want the top to be as big as the content and then the bottom fill the rest.

I assume I’ll need to use flex box model for this.
I’m not sure how to go about doing it.

I’ve created a pen here

As you can see, if the window is short enough, the top area is cut off. I’d like to have the bottom green area only take up as much space as needed.

I feel like I’m missing something super newbish!

[Alan C]

Seems like Flexbox or JS are the things to try out here. Found an article

https://css-tricks.com/boxes-fill-height-dont-squish/

I think this is what you want but correct me if I’m wrong.

[Author]

Posts