Chrome / Safari无法填充Flex父级的100％高度

解

使用嵌套的伸缩容器。

摆脱百分比高度。摆脱表属性。摆脱

vertical-align

。避免绝对定位。 一直坚持使用flexbox。

应用于

display: flex

flex项目（

.item

），使其成为flex容器。这会自动设置

align-items:stretch

，告诉孩子（

.item-inner

）扩大父母的整个身高。

重要提示：从弹性项目中删除指定的高度，此方法才能起作用。 如果孩子有指定的身高（例如

height: 100%

），那么它将忽略

align-items: stretch

来自父母的身高。为了使

stretch

默认设置生效，孩子的身高必须计算为

auto

。

试试看（HTML不变）：

.container {    display: flex;    flex-direction: column;    height: 20em;    border: 5px solid black}.item {    display: flex;    flex: 1;    border-bottom: 1px solid white;}.item-inner {    display: flex;    flex: 1;                  }a {    display: flex;    flex: 1;          align-items: center;         background: orange;        }<div >  <div >    <div >      <a>Button</a>    </div>  </div>  <div >    <div >      <a>Button</a>    </div>  </div>  <div >    <div >      <a>Button</a>    </div>  </div></div>

说明

我的问题是
.item-inner { height: 100% }
无法在webkit（Chrome）中使用。

它不起作用，因为您使用的百分比高度与规范的传统实现方式不一致。

10.5内容高度：
height
属性
percent
指定百分比高度。相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度，并且此元素未绝对定位，则该值将计算为
auto
。
自动
高度取决于其他属性的值。

换句话说，要使百分比高度适用于流入儿童，父级必须具有设定的高度。

在您的代码中，顶级容器具有定义的高度：

.container { height: 20em; }

第三级容器具有定义的高度：

.item-inner { height: 100%; }

但是在它们之间，二级容器

.item

– 没有定义的高度。Webkit将其视为缺少的链接。

.item-inner

告诉Chrome：给我
height: 100%
。Chrome浏览器会向父级（

.item

）供参考并做出响应：
100％是什么？我什么也没看到（忽略

flex: 1

那里的规则）。结果，

height: auto

根据规范适用（内容高度）。

另一方面，Firefox现在接受父级的flex高度作为孩子的百分比高度的参考。IE11和Edge也接受弯曲高度。

此外， 如果与 （任何数字值（不会），包括在内） 结合使用，Chrome会接受

flex-grow

作为适当的父级参考。但是，在撰写本文时，此解决方案在Safari中失败。 flex-basis

auto

flex-basis: 0

#outer {  display: flex;  flex-direction: column;  height: 300px;  background-color: white;  border: 1px solid red;}#middle {  flex-grow: 1;  flex-basis: 1px;  background-color: yellow;}#inner {  height: 100%;  background-color: lightgreen;}<div id="outer">  <div id="middle">    <div id="inner">      INNER    </div>  </div></div>

四种解决方案

1.在所有父元素上指定高度

可靠的跨浏览器解决方案是在所有父元素上指定高度。这样可以防止丢失链接，基于Webkit的浏览器会认为这些链接违反了规范。

请注意，

min-height

和
max-height
是不可接受的。它必须是
height
属性。

此处有更多详细信息：使用CSS

height

属性和百分比值

2. CSS相对和绝对定位

适用

position: relative

于父母和

position: absolute

孩子。

尺寸与孩子

height: 100%

和

width: 100%

，或使用污损特性：

top: 0

，

right: 0

，

bottom:0

，

left: 0

。

通过绝对定位，百分比高度可以在父级上没有指定高度的情况下工作。

3.删除不必要的HTML容器（推荐）

是否需要两个容器

button

？为什么不删除

.item

或

.item-inner

，或两者都不删除？尽管

button

元素有时无法作为flex容器使用，但它们可以是flex项目。考虑让或成为

button

孩子，并删除不必要的标记。

.container``.item

这是一个例子：

.container {    height: 20em;    display: flex;    flex-direction: column;    border: 5px solid black}a {    flex: 1;    background: orange;    border-bottom: 1px solid white;    display: flex;            align-items: center;      justify-content: center;         }<div >    <a>Button</a>    <a>Button</a>    <a>Button</a></div>

4.嵌套的Flex容器（推荐）