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;
My short talk how CSS Flexbox will help creating “flexible” Web Apps. It was recorded at this years Fronteers Jam Session.
Quick note: @kizmarh actually did the header example with floats alone by reordering the DOM elements (nice trick). But I think it’s still a bit limited and only one “flexible” element is possible. Also, Flexbox has lots of other cool features I haven’t mentioned.. like reordering and wrapping.
PS. This was my first time ever talking in front of people.. so it might be a bit rough and rushed. ;-)
Update: Uploaded the Mail UI example, but the code might be a bit messy. I just quickly did for the talk. Also, only tested in Chrome.