CSS3 Flexbox full-height app and overflow

Question

I have a app that uses a classic email like layout like the one below.

I have constructed it using the new CSS3 flexbox model and it works brilliantly until I add the ability for the user to dynamically add new items in the folders box. I would have hoped that flexbox worked in such a way that as long as there is space left in the folders box it would not begin growing into the tasks box underneath. Unfortunately this is not what I am seeing (in Chrome 17).

I have constructed a JSFiddle here that demonstrates the problem. Just click the Add Folder link and you will see the folders box growing, even though it has space enough left to accommodate the new child.

To the question. How can I construct two vertically aligned boxes using flexbox in such a way that one takes up two thirds of the available height (box-flex 2) and the other one third (box-flex 1) and that they do it in such a way that when new content is added to the first box it does not begin growing until it is out of space.

Answer 1

I can't say for sure if that's a browser bug or if it is in fact how the flex model is supposed to work. If that is how it should work I'd agree that's not exactly intuitive!

I found a work around by wrapping the lists in an absolutely positioned div with the overflow set to auto. This allows the flex boxes to maintain their original states and only change when the entire layout is recalculated vs. the content changing.

Here's the updated markup:

<section id="folders">    <div class="dynamicList">    <h2>Folders</h2>     <ul>       <li>Folder 1</li>       <li>Folder 2</li>    </ul>     <a href="#" id="add">Add Folder</a>    </div>       </section> 

And the updated CSS:

#left #tasks, #left #folders {   position: relative; }  .dynamicList {   bottom: 0;   left: 0;   overflow: auto;   position: absolute;   right: 0;   top: 0; } 

I forked your fiddle here to demo: http://jsfiddle.net/MUWhy/4/

UPDATE:

If you want the headings to remain fixed and only have the contents of the folder and tasks lists scroll, then I would consider putting the headings and the add buttons in their own fixed-height boxes within the #left div. It's a bit more mark up but still pretty simple. I haven't tried it on JSFiddle but I think that would be the best route to go.

Answer 2

I have got this answer from my other question which is is the same more or less: https://stackoverflow.com/a/14964944/1604261

Instead of @LukeGT solution, that it is a workaround and not the solution to obtain the effect, you can apply a height to the element where you want to see a vertical scroll.

So the best solution if you want a min-height in the vertical scroll:

#container article {     -webkit-flex: 1 1 auto;     overflow-y: auto;     min-height: 100px; } 

If you just want full vertical scroll in case there is not enough space to see the article:

#container article {     -webkit-flex: 1 1 auto;     overflow-y: auto;     min-height: 0px; /* or height:0px */ } 

If you do not set the height (using height or min-height) the vertical scroll will not be set. In all cases, even with height: 0px; the calculated height of the element will be different to zero.

My solution with -webkit prefix: http://jsfiddle.net/ch7n6/4/

Edit:

Since Firefox now supports full flexbox specification, removing -webkit- vendor prefix it will work with all browsers.