我在任何地方都没有看到这个答案。但我需要的技巧是确保项目具有弹性-收缩: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>

我和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实现的。

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

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

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

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

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

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

.list-wrap {
  width: 355px;
  height: 100%;
  position: relative;

  .list {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    width: 100%;
  }
}

我在任何地方都没有看到这个答案。但我需要的技巧是确保项目具有弹性-收缩: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>