Collapsing Flexbox神祕

Question

我有一個由3個塊級兄弟姐妹組成的網站：標題，div site-content和頁腳。

我有我的body標籤設定爲Flexbox的像這樣：

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

中心site-content格爲flex-grow: 1。

這工作正常，並給我這種佈局（虛線框是模擬顯示在屏幕的可見區域上的內容，頁面會按照它的順序滾動）。

我的問題出現了，因爲我想在這個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

如果你給display: flex到body元素，您還可以包括html像這樣： https://jsfiddle.net/nrwa33ry/2/

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