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

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

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

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