CSS3 Flexbox全高应用和溢出

Question

我有一个使用经典电子邮件的应用，例如下面的布局。

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

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

提出问题。如何使用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 */
}

如果未设置高度（使用 height 或 min-height ），则不会设置垂直滚动。在所有情况下，即使 height：0px; ，元素的计算高度也将不等于零。

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

修改：

由于Firefox现在支持完整的flexbox规范，因此删除 -webkit - 供应商前缀将适用于所有浏览器。

Answer 3

我更喜欢Jim的解决方案，因为它不是一个黑客 - 它可以在页面任何部分的任何弹性框上工作。 Jim只能在页面左上方的框中工作。

我通过包裹我想在div.scrollbox内滚动的弹性框的部分来解决这个问题。我让这个div的直接子项的高度为0，因此在其中添加额外的元素不会影响布局的其余部分。我还将其overflow-y设置为auto，以便在其子项超出其范围时会出现滚动条。

.scrollbox {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
}
.scrollbox > * {
    height: 0;
}

请注意，只有在将可扩展内容放置在包含元素或包含元素的情况下，此方法才有效。在此示例中，li元素包含在包含ul元素中，因此它可以正常工作。

我还必须进行一些更改才能让左上方的flexbox的3个组件正确排列，但这是特定于应用程序的。

#folders {
    display: -webkit-flex;
    -webkit-flex-flow: column;
}
#folders h2, #folders #add {
    -webkit-flex: 0 1 auto;
}

我在这里分叉了上面的jsfiddle：http://jsfiddle.net/FfZFG/。