折叠Flexbox之谜

Question

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

我将我的body标签设置为flexbox,如下所示:

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

中心site-contentdiv是flex-grow: 1.

这工作正常,并给我这个布局(虚线框是模拟屏幕的可见区域上显示的内容.页面滚动它应该).

我的问题出现了,因为我想site-content在某些页面上的div 中添加一个垂直/水平居中的框.所以,我div为这个框创建一个并设置 site content为:

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

然后site-contentdiv立即崩溃到这个:

页脚骑起来而不是停留在底部.有没有搞错？

令人沮丧的是,简单的编码器重建工作正常......所以我无法隔离这个问题的原因.

Answer 1

如果您要提供display: flex该body元素，您也可以html像这样包含： https://jsfiddle.net/nrwa33ry/2/

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