折叠Flexbox之谜

Question

我有一个由3个块级兄弟组成的网站：标题，div site-content和页脚。

我将body标记设置为flexbox，如下所示：

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

中心site-content div为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%;
}