フレックスボックスの謎を解く

Question

私は3つのブロックレベルの兄弟からなるウェブサイトを持っています：ヘッダ、div site-content、そしてフッタ。 site-content div要素がflex-grow: 1ある

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

センター：

は、私は私のbodyタグがほどフレキシボックスに設定する必要があります。

これはうまくいきました。このレイアウトは私には分かります（点線の枠は画面のどの部分に表示されているかをシミュレートすることです）。

私はいくつかのページでこのsite-contentのdivに、垂直/水平方向の中央ボックスを追加したいので、私の問題が発生します。だから、私はこのボックスのdivを作成し、これにsite contentを設定します。

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

そしてsite-contentは、直ちにこれに崩壊DIV：

フッターに滞在するのではなく、乗り上げますボトム。何が一体？

何がもっと不快になるのは、simple codepen reconstructionが問題なく動作していることです。この問題の原因を特定することができません。

Answer 1

あなたはまた、そうのようなhtmlが含まれる可能性がbody要素にdisplay: flexを与えている場合： https://jsfiddle.net/nrwa33ry/2/

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