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.