Flexbox

Vertical flex:1 with overflow scrolling

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.