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

问题描述

另一个Flex容器中的Flexbox列容器在Chrome中不会达到100％的高度，但是在Firefox和Edge中都可以。

  .container {
 display：flex; 
 flex-direction：列; 
 
身高：100％； 
宽度：100％； 
 
 .inside-container {
 display：flex; 
 flex-direction：列; 
 
身高：100％； 
 
} 
} 
  

解决方案

您在父元素：< header> 的高度：100％ >

在其中添加布局后，版式也可以在Chrome中运行。

 标题{
最低高度：100％； 
宽度：100％； 
身高：100％； / *新* / 
} 
  

使用百分比高度时，Chrome要求每个父元素都有一个定义的高度。此处有更多详细信息：

在flexbox，主要浏览器之间存在渲染差异。此处有更多详细信息：

Flexbox column container inside another flex container doesn't get 100% height in Chrome, but in Firefox and Edge all ok.

Codepen example

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

  height: 100%;
  width: 100%;

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

    height: 100%;

  }
}

解决方案

You're missing a height: 100% on a parent element: <header>

Once you add that in, the layout works in Chrome, as well.

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

Revised Codepen

When using percentage heights, Chrome requires that each parent element have a defined height. More details here:

• Working with the CSS height property and percentage values

When using percentage heights in flexbox, there are rendering differences among the major browsers. More details here:

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

这篇关于Chrome中的Flexbox容器高度不能达到100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！