Chrome中的Flexbox容器不会达到100%的高度

Question

另一个Flex容器内的Flexbox列容器在Chrome中不会达到100%的高度,但在Firefox和Edge中都可以.

Codepen示例

.container {
  display: flex;
  flex-direction: column;

  height: 100%;
  width: 100%;

  .inside-container {
    display: flex;
    flex-direction: column;

    height: 100%;

  }
}

Answer 1

你错过了height: 100%一个父元素:<header>

添加后,布局也适用于Chrome.

header {
   min-height: 100%;
   width: 100%;
   height: 100%; /* NEW */
}

修改了Codepen

使用百分比高度时,Chrome要求每个父元素都具有已定义的高度.更多细节在这里:

• 使用CSS height属性和百分比值

在flexbox中使用百分比高度时,主要浏览器之间存在渲染差异.更多细节在这里:

• Chrome/Safari不会填充100%高度的flex父级