title: CSS3 Flexbox full-height app and overflow
body: <p>I have a app that uses a classic email like layout like the one below.</p>
  
  <p><img src="https://i.stack.imgur.com/Em8DN.png" alt=""></p>
  
  <p>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).</p>
  
  <p>I have constructed a JSFiddle <a href="http://jsfiddle.net/4e6Vw/" rel="noreferrer">here</a> that demonstrates the problem. Just click the <strong>Add Folder</strong> link and you will see the folders box growing, even though it has space enough left to accommodate the new child.</p>
  
  <p>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 (<strong>box-flex 2</strong>) and the other one third (<strong>box-flex 1</strong>) 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.</p>