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