Chrome / Safari未填充flex父级的100％高度
我想要一个具有特定高度的垂直菜单。
每个孩子必须填写父母的高度，并有中间排列的文本。
孩子的数量是随机的，所以我必须使用动态值。
.container包含随机数的子项（ .item ），它们必须始终填充父项的高度。 为了实现我使用flexbox。
为了使文本链接与中间对齐，我使用display: table-cell技术。 但使用桌面显示需要使用100％的高度。
我的问题是.item-inner { height: 100% }在webkit（Chrome）中不起作用。
.item填充垂直对齐到中间的文本的父母的高度？ 这里的示例jsFiddle应该在Firefox和Chrome中查看
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>问题
我的问题是.item-inner { height: 100% }在webkit（Chrome）中不起作用。
这不起作用，因为您使用百分比高度的方式不符合传统的规范实现。
10.5内容高度： height属性
百分比
指定百分比高度。 百分比是根据生成的包含框的块的高度来计算的。 如果未明确指定包含块的高度，并且此元素没有绝对定位，则该值计算为auto 。
汽车
高度取决于其他属性的值。
换句话说，为了使百分比高度适合流入的孩子，父母必须有一个设定的高度。
在您的代码中，顶级容器具有定义的高度： .container { height: 20em; } .container { height: 20em; }
第三级容器具有定义的高度： .item-inner { height: 100%; } .item-inner { height: 100%; }
但是在它们之间，二级容器 - .item - 没有确定的高度。 Webkit认为这是一个缺失的链接。
.item-inner告诉Chrome：给我height: 100% 。 Chrome寻找父母（ .item ）以供参考和回应：100％是什么？ 我没有看到任何东西（忽略那里的flex: 1规则）。 因此，它会根据规范应用height: auto （内容高度）。
另一方面，Firefox现在接受父母的弹性高度作为孩子百分比身高的参考。 IE11和Edge也接受灵活高度。
此外，如果与flex-basis结合使用（包括flex-basis: 0 ），Chrome将接受flex-grow作为适当的父引用。 但是，在撰写本文时，此解决方案在Safari中失败。
#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> 解决方案：删除height: 100%以内.item-内部并添加display: flex .item
演示：https://codepen.io/tronghiep92/pen/NvzVoo
链接地址: http://www.djcxy.com/p/75643.html