以下是我用来实现上述布局的代码:

.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; } <div class="header">Main header</div> <div class="body"> <div class="sidebar">Sidebar</div> <div class="main"> <div class="page-header">Page Header. Content columns are below.</div> <div class="content"> <div class="column">Column 1</div> <div class="column">Column 1</div> <div class="column">Column 1</div> </div> </div> </div>

我省略了用于样式化的代码。你可以在笔里看到所有这些。


上述方法是有效的,但是当内容区域的内容溢出时,会导致整个页面滚动。我只想让内容区域本身滚动,所以我在内容div中添加了overflow: auto。

现在的问题是,列本身并没有超出它们的父高度,所以边界也在那里被切断了。

这支笔显示了滚动问题。

如何将内容区域设置为独立滚动,同时仍然让其子区域超出内容框的高度?


当前回答

添加:

align-items: flex-start;

到.content{}的规则。至少(在火狐和Chrome浏览器中),这在你的笔中为我解决了这个问题。

默认情况下,.content有align-items: stretch,这使得它的所有自动高度子项的大小与它自己的高度匹配,每个http://dev.w3.org/csswg/css-flexbox/#algo-stretch。相比之下,flex-start值让子程序计算它们自己的高度,并在起始边缘对齐(并溢出,并触发滚动条)。

其他回答

下面粗体的CSS更改(加上列中的一堆内容以测试滚动)将工作。好吧,它使每个内容列都可以单独滚动,这可能比最初要求的更多(更好?)不管怎样,看看这支笔的结果吧。

.content {flex: 1;显示:flex;身高:1 px;} .column {padding: 20px;右边框:1px实体#999;溢出: 汽车;}

这里的技巧似乎是,可滚动面板需要在某个地方设置高度(在本例中,通过其父),而不仅仅是由flexbox决定。等高1px也可以。flex-grow:1仍然将面板大小适当地适应。

这个问题的解决方案是添加overflow: auto;到.content,使内容包装器可滚动。

此外,在Flexbox包装器和溢出可滚动内容时,也会出现类似这种情况。

解决方案是添加overflow: hidden(或auto);到围绕大内容的包装器的父类(使用overflow: auto;设置)。

我在任何地方都没有看到这个答案。但我需要的技巧是确保项目具有弹性-收缩:0;否则他们就会受到挤压。

.容器 { 显示:柔性; 溢出:自动 } .container > * { 弹性收缩: 0; 宽度:10em; 高度:10米; 背景:线性渐变(右下角,#F0F,#0FF); } <div class=“container”> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

经过多次尝试和错误,我刚刚非常优雅地解决了这个问题。

看看我的博客文章:http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

基本上,要使一个flexbox单元格可滚动,你必须让它所有的父单元格overflow: hidden;,否则它会忽略你的溢出设置,而让父单元格变大。

添加:

align-items: flex-start;

到.content{}的规则。至少(在火狐和Chrome浏览器中),这在你的笔中为我解决了这个问题。

默认情况下,.content有align-items: stretch,这使得它的所有自动高度子项的大小与它自己的高度匹配,每个http://dev.w3.org/csswg/css-flexbox/#algo-stretch。相比之下,flex-start值让子程序计算它们自己的高度,并在起始边缘对齐(并溢出,并触发滚动条)。