Flex方向：列不允许儿童在Firefox中滚动

Question

我对元素（.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解决滚动问题，但会导致如果一个空白内容不够高。

Answer 1

将min-height:0加到.wrapper类。它会工作。

Answer 2

这应该可以解决

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