Flex-direction:列不允许子项在Firefox中滚动

Question

我正在使用display flex for element(.outer),它应该调整其高度到内容但不得超过一定高度(例如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解决滚动问题但如果内容不够高则会导致空格.

Answer 1

添加min-height:0到.wrapper班级.它会工作.