火狐忽略最大高度與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>

鉻正確呈現此頁：頁眉和頁腳粘和內容佔用儘可能多的空間，同時還不會超過集裝箱的高度。

與其他瀏覽器（火狐，邊緣，Android瀏覽器等）頭仍然存在，但頁腳不是和容器佔用太多的空間。

這究竟是爲什麼？ Chrome是否正確渲染這些東西，其他瀏覽器是否有錯誤？或者我做錯了什麼，Chrome是唯一一個原諒我的瀏覽器？

現在我知道我可以通過只使用一個Flexbox容器來「解決」這個問題。但是，這個問題發生在一個真正的Web項目中，我需要將它隔離開來以生成示例代碼。在真正的項目中，我需要使用兩個容器，所以應該可以通過保持兩個容器來解決這個問題。

Answer 1

該問題是不正確的嘗試繼承最大高度值，並通過使用flex和height屬性解決了GCyrillus。

請參見：

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

Answer 2

你的問題是，正如一些評論（GCyrillus）所述，你試圖繼承（最大）高度值。

我在猜測，你想要做的是將最大高度設置爲視口高度的100％？ 在這種情況下，你可以改變的100％所有實例

max-height: 100vh; 

這將其設置爲100 procent的V iewport ^h八強。

另外，你的html和body的高度設置爲500px，然後max-heights設置爲300px，這看起來很奇怪。

如果您試圖保持300px的最大高度，爲什麼不直接將container1，container2和main的max-height設置爲300px？