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

Question

我对元素（.outer）使用display flex，它应该调整其高度到内容但不得超过某个高度（例如100px）。

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

此行为在Chrome上正常运行，但在Firefox中，内容包装器（.wrapper）增长到其内容的高度（.list），因此无法滚动。

您可以使用此简化示例自行尝试：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

将max-height设置为height可解决滚动问题，但如果内容不够高，则会产生空格。

Answer 1

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

Answer 2

这应该修复

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