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

Question

另一个弹性容器内的Flexbox柱容器在Chrome中没有100％的高度，但在Firefox和Edge中都没问题。

Codepen example

.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 */
}

Revised Codepen

使用百分比高度时，Chrome要求每个父元素都有一个已定义的高度。更多细节在这里：

• Working with the CSS height property and percentage values

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

• Chrome / Safari not filling 100% height of flex parent