Chrome 中的 Flexbox 容器没有达到 100% 的高度 [重复]

【问题标题】：Flexbox container in Chrome doesn't get 100% height [duplicate]Chrome 中的 Flexbox 容器没有达到 100% 的高度 [重复]
【发布时间】：2016-07-13 07:46:46
【问题描述】：

另一个 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%;

  }
}

【问题讨论】：

标签： css google-chrome firefox flexbox

【解决方案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

【讨论】：