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

参见英文答案 > Chrome / Safari not filling 100% height of flex parent                                    4个
另一个Flex容器内的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%;

  }
}

最佳答案

您错过了父级元素的高度：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