CSS3 Flexbox 全高应用和溢出答案

【问题标题】：CSS3 Flexbox full-height app and overflowCSS3 Flexbox 全高应用和溢出
【发布时间】：2012-03-04 07:39:48
【问题描述】：

我有一个应用程序，它使用类似下面的经典电子邮件布局。

我使用新的 CSS3 flexbox 模型构建了它，它运行良好，直到我添加了用户在文件夹框中动态添加新项目的功能。我希望 flexbox 以这样一种方式工作，即只要文件夹框中还有空间，它就不会开始增长到下面的任务框。不幸的是，这不是我所看到的（在 Chrome 17 中）。

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

问题。如何使用 flexbox 构造两个垂直对齐的盒子，其中一个占据可用高度的三分之二（box-flex 2），另一个占据三分之一（box-flex 1 ）并且他们这样做的方式是，当新内容添加到第一个盒子时，它不会开始增长，直到空间不足。

【问题讨论】：

实际上，这就是它应该的行为方式。如果 A 有box-flex: 2 而B 有box-flex: 1，这并不意味着A 将是B 的两倍。这意味着A 将占用B 的剩余空间的两倍。如果有90px 的剩余空间， A 将占用 60px，B 将占用 30px。 A 和/或 B 越大，两者之间的分割空间就越小。较新的规范通过允许您指定其独立于收缩能力的增长能力来解决此问题。

标签： css flexbox

【解决方案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 上尝试过，但我认为这是最好的选择。

【讨论】：

正确，这完全符合我的要求。虽然我仍然觉得它要么是 Chrome 的 Flexbox 处理中的一个错误，要么我不了解一些更高级的 flexbox 功能（如the-haystack.com/2012/01/04/learn-you-a-flexbox 所示）
哈哈，我正是需要这个，事实证明这解决了我从表格切换到弹性布局的根本原因。现在还只是 2013 年，再次回到表中。谢谢。

【解决方案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- 供应商前缀它将适用于所有浏览器。

【讨论】：

在我的情况下，设置最小高度不起作用。但是，是的，将高度设置为零就可以了。谢谢！
是的，min-height: 0px 对我也不起作用，但 height: 0px 成功了。

【解决方案3】：

与 Jim 的解决方案相比，我更喜欢这种解决方案，因为它不像 hack - 它适用于页面任何部分的任何 flexbox。 Jim's 只能在页面左上角的框上工作。

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

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

请注意，这仅在可扩展内容放置在包含元素或包含元素中时才有效。在此示例中，li 元素包含在包含 ul 的元素中，因此它可以工作。

我还必须进行一些更改，以使左上角弹性盒的 3 个组件正确排列，但这是特定于应用程序的。

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

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

【讨论】：