html - 折叠 Flexbox 之谜

Question

我有一个由 3 个 block 级兄弟组成的网站:页眉、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%;
}