html – Chrome中嵌套的Flexbox布局中不能使用的百分比高度

2023年12月10日 294次阅读

我在Firefox和IE中完全可以使用以下布局：

不幸的是,它在Chrome中相当破碎,即深蓝色容器已折叠,即使它的高度为其父级的100％：

我试过this approach,但没有任何运气.任何想法如何在Chrome上修复此问题而不会在其他浏览器中破坏它？

html,
body {
  height: 97%;
  margin: 0;
  padding: 0;
}

div {
  border: 10px dotted teal;
}

.container {
  display: flex;
  border-color: tomato;
  height: 100%;
}

.row {
  flex-flow: row;
}

.column {
  flex-flow: column;
}

.item1 {
  flex: 1;
}

.item2 {
  flex: 2;
}

.item3 {
  flex: 3;
}

.c1 {
  border-color: gold;
}

.c2 {
  border-color: darkblue;
}
<div class="container">
  <div class="item3">
    <div class="container column c2">
      <div class="item1 c1"></div>
      <div class="item3"></div>
    </div>
  </div>
  <div class="item1 c1"></div>
  <div class="item2"></div>
</div>

最佳答案 问题是：

I have a following layout fully working in Firefox and IE.
Unfortunately it is broken in Chrome, namely the dark blue
container is collapsed even though it has height 100% of its parent.

实际上,可以提出一个相反的观点：Chrome使它正确,而Firefox和IE则被“破坏”.

首先,这是解决方案：

.item3 { height: 100%; }

现在让我们看一下您的文档结构和应用的高度：

<html> <!-- height: 97% -->
<body> <!-- height: 97% -->
<div class="container"> <!-- height: 100%; -->
    <div class="item3"> <!-- height: ?? -->
        <div class="container column c2"> <!-- height: 100% ; this is the collapsed box -->
                       ...
                       ...
                       ...

根据CSS specification,当使用百分比设置元素的高度时(就像使用.container一样),父元素也必须具有显式高度.在引用折叠的div时,其父级(.item3)没有定义的高度.

从spec开始：

<percentage>
The percentage is calculated with respect to the height
of the generated box’s containing block. If the height of the
containing block is not specified explicitly (i.e., it depends on
content height), and this element is not absolutely positioned, the
value computes to ‘auto’.

auto
The height depends on the values of other properties.

就高度属性而言,从该示例中可以看出,Chrome将“包含块”定义为“父”,而Firefox和IE将“包含块”定义为“祖先”,或者它们将弹性高度视为百分比高度的参考. .

因此,由于具有深蓝色边框(.container列c2)的div没有内容,并且其父级没有指定高度,因此没有高度,并且该框在Chrome中折叠.

但是,通过指定.item3的高度(即折叠框的父级),高度适用于所有浏览器.

DEMO

UPDATE

更多细节：

> Heights rendering differently in Chrome and Firefox

点赞