6

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.

Curyous
  • 8,716
  • 15
  • 58
  • 83

1 Answers1

16

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

#content {
    background-color: #ceecf5;
    flex-grow: 1;
    overflow: auto;
}
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • This doesn't work in Safari, though. Any ideas for that? – Curyous Sep 17 '15 at 22:54
  • It's pretty basic and standard css, so I'm pretty sure it's not the problem. Safari version up to and including 8 need the -webkit- prefix for flexbox properties. – Ori Drori Sep 17 '15 at 23:06