Firefox忽略了Flexbox的最大高度

Question

我編寫了以下Flexbox布局：

https://jsfiddle.net/atb5yyez/4/

 html, body { max-height: 300px; overflow: hidden; } .container1 { display: flex; max-height: 100%; flex-flow: column; } .container2 { display: flex; flex-flow: column; max-height: 100%; box-sizing: border-box; border: 3px solid black; } header { background-color: blue; } main { background-color: red; max-heigth: 100%; overflow: auto; } footer { background-color: green; } 

 <div class="container1"> <div class="container2"> <header>header</header> <main> content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content </main> <footer>footer</footer> <div> </div> 

Chrome可以正確呈現此頁面：頁眉和頁腳具有粘性，內容占用了盡可能多的空間，而占用的空間仍不超過容器的高度。

對於其他瀏覽器（Firefox，Edge，Android瀏覽器等），標頭仍然存在，但頁腳不存在，並且容器占用太多空間。

為什么會這樣呢？ Chrome瀏覽器是否可以正確渲染內容，其他瀏覽器是否有錯誤？ 還是我做錯了什么，Chrome是唯一可以原諒我的瀏覽器？

現在，我知道可以僅使用一個Flexbox容器來“解決”此問題。 但是，該問題發生在一個真實的Web項目中，我需要將其隔離以產生示例代碼。 在實際的項目中，我需要使用兩個容器，因此應該可以通過將兩個容器都放置在適當的位置來解決此問題。

Answer 1

正如一些評論（由GCyrillus發表）所述，您的問題是，您試圖繼承（max-）height值。

我猜，您想做什么，是將max-height設置為視口高度的100％？ 在這種情況下，您可以將所有100％的實例更改為

max-height: 100vh;

這將其設置為視頻端口H的 100％。

另外，您的html和body的高度設置為500px，然后max-heights設置為300px，這似乎很奇怪。

如果您嘗試將最大高度保持為300px，為什么不將container1，container2和main的最大高度也設置為300px？

Answer 2

該問題是繼承max-height值的錯誤嘗試，並由GCyrillus通過使用flex和height屬性解決了。

看到：

jsfiddle.net/atb5yyez/6
jsfiddle.net/atb5yyez/7