有溢出的彎曲孩子尊重父母在Chrome中的最大高度，而不是Firefox

Question

我有一個帶有max-height的flexbox容器。它有兩個孩子，水平彎曲，其中一個有overflow: auto。在Chrome中，溢出的孩子停止增長，並在達到容器的最大高度後滾動。在Firefox中，它溢出了容器。

我正在針對最新的Chrome（目前爲59）進行開發，但必須支持Firefox 40+，因此我正在使用Firefox 40進行測試。作爲參考，caniuse.com報告FF40 fully supports flexbox。

這顯然是在新版本的FF正常工作，但不是在FF40，我使用，所以對於那些沒有進入到舊的FF，這裏是我看到的行爲的截圖：

火狐40

鉻59

我可以通過消除左邊的孩子解決這個和設置在容器上使用flex-direction: column，但不幸的是我的實際應用需要左側的內容，並且需要水平彎曲。

爲什麼不同瀏覽器之間的差異？什麼是跨瀏覽器的解決方案，以允許孩子溢出停止增長，因爲它在Chrome中？

div { padding: 10px; } 
 

 
#container { 
 
    border: 1px solid green; 
 
    display: flex; 
 
    max-height: 200px; 
 
} 
 

 
#left { 
 
    border: 1px solid purple; 
 
    flex: 1; 
 
} 
 

 
#right { 
 
    border: 1px solid orange; 
 
    flex: 3; 
 
    overflow: auto; 
 
}

<div id="container"> 
 
    <div id="left"> 
 
    Left content 
 
    </div> 
 
    <div id="right"> 
 
    I stop growing at 200px tall in Chrome, but not in Firefox 
 
    <ul> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

爲什麼跨瀏覽器的差異？

當前的行爲（即柔性物品做尊重他們的父母柔性容器最大大小限制）是不是在規格，直到2014年，這可以解釋爲什麼Firefox的行爲最初匹配，IE瀏覽器的。這首先由IE團隊here提出，並且解決了here。這也意味着Chrome的行爲在技術上與當時的規格有所偏差，即使它是明智的。

該規範自此成爲updated to match Chrome's sensible behavior，導致IE和Firefox的原始行爲不合規。不幸的是，Firefox的實現沒有更新，直到今年與發佈Firefox 51（即使微軟邊緣第一次新的行爲），這就是爲什麼舊的行爲仍然存在於Firefox 40.這就是爲什麼我往往不依賴於flexbox的兼容性表 - 三年前的情況比現在要穩定得多。

請參閱Bugzilla中的bug 1000957（也鏈接到Fx 51發行說明中）。

什麼是跨瀏覽器的解決方案，讓兒童溢出停止增長，因爲它在Chrome中？

正如您看到的，設置在柔性的項目，而不是flex容器max-height是你能做的最好的，因爲彎曲的物品或者尊重，或者不這樣做，他們的柔性容器寬度/高度限制。請注意，flex容器和flex項目中有邊框和填充，因此在爲flex項目確定適當的max-height時，您必須考慮這些邊框和填充。