关于css：滚动包含溢出内容的flexbox

Scrolling a flexbox with overflowing content

enter image description here

下面是我用来实现上述布局的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.header {
height: 50px;
}

.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}

.sidebar {
width: 140px;
}

.main {
flex: 1;
display: flex;
flex-direction: column;
}

.content {
flex: 1;
display: flex;
}

.column {
padding: 20px;
border-right: 1px solid #999;
}

1
2
3
4
5
6
7
8
9
10

Main header

Sidebar

Page Header. Content columns are below.

Column 1
Column 1
Column 1

我省略了用于样式设计的代码。你可以在笔里看到所有的东西。

上面的工作是有效的，但是当content区域的内容溢出时，它会使整个页面滚动。我只想让内容区本身滚动，所以我将overflow: auto添加到content分区。

现在的问题是，这些列本身没有超出它们的父级高度，因此边界也被切掉了。

这是显示滚动问题的笔。

如何设置content区域独立滚动，同时其子对象仍超出content框的高度？

我已经和TabAtkins(flexbox规范的作者)讨论过这个问题，这就是我们想到的：

HTML：

1
2
3

Column 1
Column 1
Column 1

CSS：

1
2
3
4
5
6
7
8
9
10

.content {
flex: 1;
display: flex;
overflow: auto;
}

.box {
min-height: min-content; /* needs vendor prefixes */
display: flex;
}

这是笔：

正在拉伸的短柱。

更长的列溢出和滚动。

这样做的原因是，如果align-items: stretch有一个固有的高度，它就不会缩小其项，这是由min-content完成的。

相关讨论

我想你快明白了。只需在.box上添加"min height:100%"，就可以使.box(及其弹性列)占据全部可用高度，即使这些列的内容变短了。
@dholbert-百分比高度仅在父级具有固定高度时工作。
当父母的身高不依赖于子女时，他们就会工作，一般来说，这里就是这样。最小高度：100%确实可以修复你的拉伸，即使在火狐中列很短(虽然不是在Chrome中)。不确定是Chrome还是火狐。
@托尔伯特-塔阿特金斯帮了我。我已经更新了我的答案。
注意，火狐目前只支持宽度值的"最小内容"，而不支持高度值——所以如果这对你很重要的话，在火狐中就不适用了。(如：bugzilla.mozilla.org/show_bug.cgi？ID＝852367)
(即使在Chrome(v32 dev)中，我也没有看到"最小高度：-webkit最小内容"；"在您更新的答案中的"ehlfl"笔中有任何效果。"我用你给出的高度和较短的高度尝试了这些列，并且"最小高度"decl似乎不会影响我的机器上的渲染。你确定它在给你买东西吗？)
@多尔伯特-这些笔的问题在于它们是公开的，所以任何人都可以更换它们。我得到了他们的所有权，所以给你：codepen.io/josephsilber/pen/pmyh
值得一提的是，我给csswg发了邮件，澄清了chrome&firefox与"最小高度：100%"之间的行为差异，这在前三条评论中提到。我的帖子：lists.w3.org/archives/public/www-style/2014feb/0180.html
@多尔伯特-我问了塔伯。结果证明firefox是正确的："这是因为当容器在横轴上是确定的时，对于"拉伸"的东西是否确定存在分歧。火狐是正确的-这是一段时间前在规范中更新的，wk/blink还没有更新：dev.w3.org/csswg/css flexbox/algo stretch"。
谢谢你举个好例子。它工作得很顺利，但在我的例子中，我需要容器上的flex-flow: row wrap;+元素上的flex: 1 100%;溢出(见这里)。很遗憾，我需要重新设计HTML。
这在Chrome中不能正常工作，页面标题文本消失的越多，内容溢出的越多。
@你可以设置页面标题的最小高度来解决消失的标题文本问题，但据我所知，这个解决方案只适用于Chrome。它在火狐上不起作用，可能是由于dholbert提到的bug，而且根据canius甚至IE11，IE不支持Min内容。我想我需要继续找。
是的，这个在IE11里坏了
两年后，"短柱被拉伸"似乎不再有效。
@用户2543253列由它们之间的边框标识，而不是红色部分。红色部分是列中的内容(现在回顾一下，我看到了这是多么令人困惑)。
啊，我明白了。谢谢您。
这真是太棒了——非常感谢你这么做，它让我在尝试使我的页面响应时省去了很多头痛。

经过多次反复试验，我才很好地解决了这个问题。

查看我的博客帖子：http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

基本上，要使flexbox单元格可滚动，必须使其所有父级overflow: hidden;，否则它将忽略溢出设置，而使父级变大。

相关讨论

与position:absolute;和flex一起工作：

用position: relative定位柔性项目。然后在其中添加另一个元素：

1
2
3
4
5

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

这会将元素扩展到其相对定位父元素的边界，但不允许扩展它。在内部，overflow: auto;将按预期工作。

答案中包含的代码段-运行代码段或
单击此处获取代码笔
结果：。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.all-0 {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
p {
text-align: justify;
}
.bottom-0 {
bottom: 0;
}
.overflow-auto {
overflow: auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

祝你好运。。。

相关讨论

稍晚一点，但这有助于：http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

基本上，你需要把html、body放到height: 100%;中，把你所有的内容包装成中。

CSS：

1
2
3
4
5
6
7
8

html, body {
height: 100%;
}

.wrap {
height: 100vh;
display: flex;
}

为我工作。希望它有帮助

添加：

1	align-items: flex-start;

根据.content {}的规则。至少在Firefox和Chrome中，它可以在你的笔中修复。

默认情况下，.content有align-items: stretch，这使得它可以根据http://dev.w3.org/csswg/css flexbox/algo-stretch调整所有自动高度子项的大小以匹配自己的高度。相反，值flex-start允许孩子们计算他们自己的高度，并在开始边缘对齐(和溢出，并触发滚动条)。

相关讨论