Chrome / Safari没有填充flex父项的100％高度
我想要一个具有特定高度的垂直菜单。
每个孩子必须填写父母的高度，并有中间排列的文本。
孩子的数量是随机的，所以我必须使用dynamic值。
.container包含随机数的子项（ .item ），它们必须始终填充父项的高度。 为了实现我用flexbox。
为了使文本链接与中间alignment，我使用display: table-cell技术。 但是使用桌面显示需要使用100％的高度。
我的问题是.item-inner { height: 100% }在webkit（Chrome）中不起作用。
- 有没有解决这个问题？
- 还是有一种不同的技术，使所有
.item填充父母的高度与文本垂直alignment中间？
这里的示例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。汽车
高度取决于其他属性的值。
换句话说，对于stream入孩子的百分比高度，父母必须有一个设定的高度。
在您的代码中，顶级容器具有定义的高度： .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高度。
另外， 如果与flex-basis结合使用 （包括flex-basis: 0 ），则Chrome将接受flex-grow作为适当的父引用。 但在撰写本文时，此解决scheme在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>
解决scheme：删除height: 100% 的内部。添加display: flex在.item
演示： https ： //codepen.io/tronghiep92/pen/NvzVoo
