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

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

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

我和Tab Atkins (flexbox规范的作者)谈过这个问题，这就是我们的想法:

HTML:

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

CSS:

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

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

这些是笔:

短柱被拉伸。 较长的列溢出和滚动。

这样做的原因是align-items:如果项目具有固有高度，则拉伸不会收缩它们，这是通过min-content实现的。

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

看看我的博客文章: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值让子程序计算它们自己的高度，并在起始边缘对齐(并溢出，并触发滚动条)。

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

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

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

有点晚了，但这可能会有所帮助: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

基本上你需要输入html,body - height: 100%;并将所有内容包装成<div class="wrap"> <!——content——> </div>

CSS:

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