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

Posted 2023-03-06

【中文标题】Chrome 中的 Flexbox 容器没有达到 100% 的高度 [重复]

【英文标题】：Flexbox container in Chrome doesn't get 100% height [duplicate]

【发布时间】：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%;

  

【参考方案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