Firefox忽略了Flexbox的最大高度

Question

I have written the following Flexbox layout:

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 renders this page correctly: header and footer are sticky and the content takes as much space as possible, while still not taking more than the height of the container.

With other browsers (Firefox, Edge, Android Browser etc.) the header is still there but the footer is not and the container takes way too much space.

Why is this happening? Is Chrome rendering the thing correctly and other browsers have a bug? Or have I done something wrong and Chrome is the only browser which forgives me?

Now I know I can "solve" this problem by using only one Flexbox container. However, the problem occurred in a real web project and I needed to isolate it to producude the example code. In the real project I need to use two containers so it should be possible to solve this by keeping both containers in place.

Answer 1

Your problem is, as has been stated in a few comments (by GCyrillus), that you're trying to inherit the (max-)height values.

I'm guessing, what you want to be doing, is setting the max-height to 100% of the viewport height? In that case, you can change all instances of 100% to

max-height: 100vh;

This sets it to 100 procent of iewport eight.

Also, your html and body have heights set to 500px and then max-heights set to 300px, which seems odd.

If you're trying to keep this max-height of 300px, why don't you just set the max-height of container1, container2 and main to 300px as well?

Answer 2

The problem was an incorrect attempt to inherit max-height values and was solved by GCyrillus by using flex and height properties.

See:

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