26

我有一个应用程序,它使用像下面这样的经典电子邮件布局。

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

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

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

4

3 回答 3

16

我不能确定这是否是浏览器错误,或者实际上是 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 上尝试过,但我认为这将是最好的选择。

于 2012-02-12T19:21:32.190 回答
14

我从我的另一个问题中得到了这个答案,这或多或少是相同的: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 */
}

如果您不设置高度(使用heightmin-height),则不会设置垂直滚动。在所有情况下,即使使用height: 0px; 元素的计算高度将不为零。

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

编辑

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

于 2013-02-19T18:54:37.197 回答
4

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

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

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

于 2012-12-13T07:18:20.747 回答