Can you create a child flexbox to match the parent but not the content?

Question

I use flexboxto make the div take up the remaining vertical space in the browser window, but I would like it to not expand. When its content exceeds its vertical size, I would like the scroll bar to appear in the flexbox child, which is now too small.

Is it possible? Or is there some other layout method I should use for this?

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

Another vertical space is occupied by the toolbar, the exact vertical size of which is not known in advance.

Answer 1

Just add overflow: autoto #content( updated script ):

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