Can you make a flexbox child expand to fit parent but not contents?

Question

I'm using a flexbox to make a div take up the remaining vertical space in the browser window, but I'd like to prevent it from expanding beyond that. When its contents exceed its vertical size, I'd like a scrollbar to show up in the flexbox child that is now too small.

Is this possible? Or is there some other layout technique I should be using for this?

Here's a link to a JSFiddle to show the situation: https://jsfiddle.net/83990d3a/

The other vertical space is taken up with a toolbar, the exact vertical size of which is not known beforehand.

Answer 1

Just add overflow: auto to #content (updated fiddle):

#content {
    background-color: #ceecf5;
    flex-grow: 1;
    overflow: auto;
}