CSS3 Flexbox全高应用和溢出

Question

我有一个使用经典电子邮件的应用程序,如下面的布局.

我使用新的CSS3 flexbox模型构建它,它的工作非常出色,直到我添加了用户在文件夹框中动态添加新项目的能力.我希望flexbox以这样的方式工作,只要文件夹框中还有空间,它就不会开始生长到下面的任务框中.不幸的是,这不是我所看到的(在Chrome 17中).

我在这里构建了一个JSFiddle 来演示这个问题.只需单击" 添加文件夹"链接,您就会看到文件夹框增长,即使它有足够的空间容纳新的孩子.

对于这个问题.如何使用flexbox构造两个垂直对齐的盒子,使得一个占据可用高度的三分之二(box-flex 2)而另一个占据三分之一(box-flex 1),并且它们以这种方式完成当新内容添加到第一个框时,它不会开始增长,直到它没有空间.

Answer 1

我不能确定这是否是一个浏览器错误,或者它实际上是如何工作的flex模型.如果它应该如何工作我会同意这不完全直观!

我找到了一个解决方法,将列表包装在绝对定位的div中,并将溢出设置为auto.这允许弹性框保持其原始状态,并且仅在重新计算整个布局与内容改变时改变.

这是更新的标记:

<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>

和更新的CSS:

#left #tasks,
#left #folders {
  position: relative;
}

.dynamicList {
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
}

我把你的小提琴分到了这里:http: //jsfiddle.net/MUWhy/4/

更新:

如果你想让标题保持固定并且只有文件夹和任务列表的内容滚动,那么我会考虑将标题和添加按钮放在#left div中自己的固定高度框中.它有点标记,但仍然非常简单.我没有在JSFiddle上尝试过,但我认为这将是最好的路线.

Answer 2

我从其他问题得到了这个答案,或多或少都是一样的:https://stackoverflow.com/a/14964944/1604261

而不是@LukeGT解决方案,它是一种变通方法,而不是获得效果的解决方案,您可以将高度应用于要查看垂直滚动的元素.

因此,如果您想在垂直滚动中使用最小高度,那么这是最佳解决方案:

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

如果您只想要完整的垂直滚动,以防没有足够的空间来查看文章:

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

如果未设置高度(使用高度或最小高度),则不会设置垂直滚动.在所有情况下,即使身高:0px; 计算出的元素高度将不等于零.

我的解决方案使用-webkit前缀:http://jsfiddle.net/ch7n6/4/

编辑:

由于Firefox现在支持完整的flexbox规范,因此删除-webkit- vendor前缀将适用于所有浏览器.