我有一个应用程序,它使用像下面这样的经典电子邮件布局。
我使用新的 CSS3 flexbox 模型构建了它,它运行良好,直到我添加了用户在文件夹框中动态添加新项目的功能。我希望 flexbox 能够以这样的方式工作,只要文件夹框中还有空间,它就不会开始增长到下面的任务框。不幸的是,这不是我所看到的(在 Chrome 17 中)。
我在这里构建了一个 JSFiddle来演示这个问题。只需单击“添加文件夹”链接,您就会看到文件夹框在增长,即使它还有足够的空间来容纳新的孩子。
对问题。如何使用 flexbox 构造两个垂直对齐的盒子,其中一个占据可用高度的三分之二(box-flex 2),另一个占据三分之一(box-flex 1),并且它们以这种方式进行当新内容添加到第一个盒子时,它不会开始增长,直到空间不足。