滚动具有满溢内容的Flexbox

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

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

我省略了用于造型的代码。 你可以在笔中看到所有的东西。

---

以上的工作，但是当content区域的内容溢出时，就会使整个页面滚动。 我只想要内容区域本身滚动，所以我添加了overflow: auto到content div 。

现在的问题是，柱子本身并没有超出父母的高度，所以边界也被切断了。

这是显示滚动问题的笔 。

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

Answer 1

我已经和Tab Atkins （flexbox规范的作者）谈过这件事了，这就是我们想到的：

HTML：

 <div class="content"> <div class="box"> <div class="column">Column 1</div> <div class="column">Column 1</div> <div class="column">Column 1</div> </div> </div> 

CSS：

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

这是笔：

1. 短列被拉伸 。
2. 更长的列溢出和滚动 。

这个原因是因为align-items: stretch如果它们有一个固有的高度，它不收缩它的项目，这是由min-content 。

Answer 2

经过大量的反复试验，我才解决了这个问题。

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

基本上，要使Flexbox单元格滚动，您必须使其所有父项都 overflow: hidden; ，否则它只会忽略你的溢出设置，而是使父代变大。

Answer 3

有点迟了，但这可以帮助： http : //webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox–cms-23269

基本上你需要把html ， height: 100%; 并将所有内容封装到<div class="wrap"> <!-- content --> </div>

CSS：

 html, body { height: 100%; } .wrap { height: 100vh; display: flex; } 

为我工作。 希望能帮助到你

Answer 4

添加这个：

 align-items: flex-start; 

到.content {}的规则。 至less（在Firefox和Chrome浏览器中），我都会将其固定在笔中。

默认情况下，.content具有“align-items：stretch”，这使得它可以将所有自动填充高度的子元素的大小设置为与自己的高度相匹配，根据http://dev.w3.org/csswg/css-flexbox/#algo – 伸展 。 相比之下，“flex-start”的值可以让孩子们计算出自己的身高，并且在自己的起始边缘alignment（并且溢出，并且触发一个滚动条）。