Flex-direction：column 不允许子项在 Firefox 中滚动 [重复]答案

【问题标题】：Flex-direction:column doesn't allow children to be scrollable in Firefox [duplicate]Flex-direction：column 不允许子项在 Firefox 中滚动 [重复]
【发布时间】：2017-07-28 20:19:27
【问题描述】：

我正在为一个元素 (.outer) 使用 display flex，它应该根据内容调整其高度，但不得超过特定高度（例如 100px）。

一旦超过高度，我希望里面的内容开始垂直滚动。

此行为在 Chrome 上按预期工作，但在 Firefox 中，内容包装器 (.wrapper) 增长到其内容的高度 (.list)，因此不可滚动。

您可以使用这个简化的示例自行尝试：

.outer {
  display: flex;
  max-height: 100px;
  overflow: hidden;
  flex-direction: column;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.list {
  width: 100%;
  background: purple;
  overflow: scroll;
}

<div class="outer">
  <div class="wrapper">

    <div class="list">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
    </div>

  </div>

</div>

https://codepen.io/anon/pen/rzOpPZ

将max-height 设置为height 可以解决滚动问题，但如果内容不够高，则会出现空白。

【问题讨论】：

添加.outer {height: 100px;}
@fen1x 谢谢这可以解决我的问题，但不幸的是我需要它是一个最大高度，否则它会创建一个大的空白。

标签： css firefox flexbox

【解决方案1】：

将min-height:0 添加到.wrapper 类。它会起作用的。

【讨论】：

哇，这正是我想要的！
很高兴有帮助。干杯！

【解决方案2】：

这应该可以解决

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  min-height:0;
}

【讨论】：