CSS CSS3 Flexbox 全高应用程序和溢出

CSS3 Flexbox full-height app and overflow

提问by Lars Tackmann

I have a app that uses a classic email like layout like the one below.

我有一个应用程序使用经典的电子邮件布局，如下所示。

I have constructed it using the new CSS3 flexbox model and it works brilliantly until I add the ability for the user to dynamically add new items in the folders box. I would have hoped that flexbox worked in such a way that as long as there is space left in the folders box it would not begin growing into the tasks box underneath. Unfortunately this is not what I am seeing (in Chrome 17).

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

I have constructed a JSFiddle herethat demonstrates the problem. Just click the Add Folderlink and you will see the folders box growing, even though it has space enough left to accommodate the new child.

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

To the question. How can I construct two vertically aligned boxes using flexbox in such a way that one takes up two thirds of the available height (box-flex 2) and the other one third (box-flex 1) and that they do it in such a way that when new content is added to the first box it does not begin growing until it is out of space.

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

采纳答案by Jim Jeffers

I can't say for sure if that's a browser bug or if it is in fact how the flex model is supposed to work. If that is how it should work I'd agree that's not exactly intuitive!

我不能肯定这是否是浏览器错误，或者它实际上是 flex 模型应该如何工作。如果这是它应该如何工作，我同意这并不完全直观！

I found a work around by wrapping the lists in an absolutely positioned div with the overflow set to auto. This allows the flex boxes to maintain their original states and only change when the entire layout is recalculated vs. the content changing.

我找到了一种解决方法，将列表包装在绝对定位的 div 中，并将溢出设置为自动。这允许 flex 框保持其原始状态，并且仅在重新计算整个布局与内容更改时才更改。

Here's the updated markup:

这是更新的标记：

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

And the updated CSS:

以及更新的 CSS：

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

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

I forked your fiddle here to demo: http://jsfiddle.net/MUWhy/4/

我把你的小提琴分叉到这里来演示：http: //jsfiddle.net/MUWhy/4/

UPDATE:

更新：

If you want the headings to remain fixed and only have the contents of the folder and tasks lists scroll, then I would consider putting the headings and the add buttons in their own fixed-height boxes within the #left div. It's a bit more mark up but still pretty simple. I haven't tried it on JSFiddle but I think that would be the best route to go.

如果您希望标题保持固定并且只有文件夹和任务列表的内容滚动，那么我会考虑将标题和添加按钮放在#left div 内的它们自己的固定高度框中。它的标记有点多，但仍然很简单。我还没有在 JSFiddle 上尝试过，但我认为这将是最好的方法。

回答by José Cabo

I have got this answer from my other question which is is the same more or less: https://stackoverflow.com/a/14964944/1604261

我从我的另一个问题中得到了这个答案，这或多或少是相同的：https: //stackoverflow.com/a/14964944/1604261

Instead of @LukeGT solution, that it is a workaround and not the solution to obtain the effect, you can apply a height to the element where you want to see a vertical scroll.

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

So the best solution if you want a min-heightin the vertical scroll:

因此，如果您想要垂直滚动中的最小高度，最好的解决方案是：

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

If you just want full vertical scrollin case there is not enough space to see the article:

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

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

If you do not set the height (using heightor min-height) the vertical scroll will not be set. In all cases, even with height: 0px;the calculated height of the element will be different to zero.

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

My solution with -webkit prefix: http://jsfiddle.net/ch7n6/4/

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

Edit:

编辑：

Since Firefox now supports full flexbox specification, removing -webkit-vendor prefix it will work with all browsers.

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

回答by LukeGT

I prefer this solution to Jim's since it's less of a hack - it will work on any flexbox on any part of the page. Jim's can only work on a box in the very top left of a page.

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

I solved this by wrapping the part of the flex box that I wanted to scroll inside a div.scrollbox. I made the direct children of this divhave a height of 0, so that adding extra elements within it would not affect the rest of the layout. I also set its overflow-yto autoso that a scrollbar would appear if its children extend beyond its bounds.

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

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

Note that this will only work if the extendible content is placed within a containing element or containing elements. In this example, lielements are contained within a containing ulelement, so it works.

请注意，这仅在可扩展内容放置在一个或多个包含元素中时才有效。在这个例子中，li元素包含在一个包含ul元素中，所以它可以工作。

I also had to make some changes in order to get the 3 components of the top left flexbox to arrange themselves properly, but this was application specific.

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

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

I forked the above jsfiddle here: http://jsfiddle.net/FfZFG/.

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