折叠 Flexbox 之谜

Question

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

我将我的bodytag 设置为弹性框：

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%;
}