CSS3 Flexbox, полноразмерное приложение и переполнение

У меня есть приложение, использующее классический макет электронной почты, подобный приведенному ниже.

Я сконструировал его, используя новую модель флексбокса CSS3, и он отлично работает, пока я не добавлю пользователю возможность динамически добавлять новые элементы в поле папок. Я бы надеялся, что flexbox работает таким образом, что пока в поле папок остается место, он не начинает расти в поле задач внизу. К сожалению, это не то, что я вижу (в Chrome 17).

Я построил JSFiddle здесь , который демонстрирует проблему. Просто щелкните ссылку Добавить папку , и вы увидите, что поле папок увеличивается, хотя в нем остается достаточно места для размещения нового дочернего элемента.

К вопросу. Как я могу построить два вертикально выровненных бокса с помощью flexbox таким образом, чтобы один занимал две трети доступной высоты ( box-flex 2 ), а другой - одну треть ( box-flex 1 ) и что они делают это таким образом, что когда новый контент добавляется в первый ящик, он не начинает расти, пока не закончится свободное место.