Minimize Flexbox mystery

Question

I have a website that consists of 3 level bracelets: headline, div site-content and footer.

I have the body tag set as flexbox as such:

 display: flex; flex-direction: column; height: 100%; 

Center site-content div flex-grow: 1 .

This works great and gives me this layout (the dotted frame is designed to simulate what is displayed in the visible area of ​​the screen. The page scrolls as it should).

My problem arises since I want to add a vertically / horizontally centered cell in this site-content div on some pages. So, I create a div for this field and set the site content :

  .site-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } 

And then the site-content div immediately crashes into this:

The footer is suitable instead of staying below. What the hell?

What is even more frustrating is that a simple reconstruction of the code works fine ... so I am having trouble resolving the cause of this problem.

Answer 1

If you give display: flex to the body element, you can also enable html like this: https://jsfiddle.net/nrwa33ry/2/

 body,html { margin:0; padding: 0; display: flex; flex-direction: column; height: 100%; }