I started to use the new Flexbox syntax in a couple places and often needed something to be vertically flexible, but when content starts to overflow, it should add a scrollbar.

First I tried it like this:

flex: 1;
overflow: auto;

but somehow it didn’t work. Just when adding height/min-height:0 it works.

flex: 1;
overflow: auto;
min-height: 0;

Not sure if that’s the intended behavior or a bug. Anyways, happy there is a simple fix for it. You can test it in this demo.

Update: Ivan points out that flex: 1 is not even needed. So the simplest way is just this:

overflow: auto;
min-height: 0;