Css Chrome/Safari未填充flex父级的100%高度

我想要一个有特定高度的垂直菜单

每个子级必须填充父级的高度，并具有中间对齐的文本

子对象的数量是随机的，因此我必须处理动态值

Div

.container

包含随机数目的子项（

.item

），这些子项始终必须填充父项的高度。为了实现这一点，我使用了flexbox

为了制作文本与中间对齐的链接，我使用了

display:table cell

技术。但是使用表格显示需要使用100%的高度

我的问题是

.item-inner{height:100%}

在webkit（Chrome）中不起作用

这个问题有解决办法吗

或者，是否有一种不同的方法使所有

.item

用垂直对齐到中间的文本填充父项的高度

.container{
高度：20em；
显示器：flex；
弯曲方向：立柱；
边框：5px纯黑
}
.项目{
弹性：1；
边框底部：1px纯白；
}
.项目内部{
身高：100%；
宽度：100%；
显示：表格；
}
a{
背景：橙色；
显示：表格单元格；
垂直对齐：中间对齐；
}

按钮
按钮
按钮

解决方案 使用嵌套的flex容器

摆脱百分比高度。去掉表属性。摆脱垂直对齐。避免绝对定位。只要一直坚持使用flexbox即可

将

display:flex

应用于flex项（

.item

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

align items:stretch

，这会告诉子项（

.item-inner

）展开父项的整个高度

重要提示：删除柔性项中的指定高度，以使此方法生效。如果子项具有指定的高度（例如，

高度：100%

），则它将忽略来自父项的

对齐项目：拉伸

。要使

拉伸

默认工作，孩子的身高必须计算为

自动

）

尝试以下操作（不更改HTML）：

.container{
显示器：flex；
弯曲方向：立柱；
高度：20em；
边框：5px纯黑
}
.项目{
显示：flex；/*新建；嵌套flex容器*/
弹性：1；
边框底部：1px纯白；
}
.项目内部{
显示：flex；/*新建；嵌套flex容器*/
弹性：1；/*新*/
/*高度：100%；解决方案：删除
高度：100%
in.项目内部，并在.item中添加
显示：flex

演示：
我在iOS 8、9和10中遇到了类似的问题，上面的信息无法解决，但是我在这方面做了一天的工作后发现了一个解决方案。虽然它不适用于所有人，但在我的情况下，我的项目堆叠在一列中，当它应该是内容高度时，高度为0。将css切换为行和换行固定这个问题。这只适用于你有一个单一的项目，他们是堆叠的，但由于我花了一天的时间才发现这一点，我认为我应该分享我的修复

.wrapper {
    flex-direction: column; // <-- Remove this line
    flex-direction: row; // <-- replace it with
    flex-wrap: wrap; // <-- Add wrapping
}

.item {
    width: 100%;
}

.wrapper{
flex direction:column；//对于Mobile Safari，有一个浏览器修复程序。对于iOS设备，您需要添加-webkit-box

前

如果正在为父元素使用
align items:stretch；
属性，请从子元素中删除
height:100%
。
为我使用的容器指定flex属性：

.container {
    flex: 0 0 auto;
}

这确保了高度已设置且不会增加。
它现在已被修复-这与OP没有特别关系，但可能与谷歌的“safari显示绝对高度100%不起作用”相关或者类似的东西。我在flex容器中有一个这样的元素，必须指定
top:0
和
left:0
，以使其按预期显示。@vsync尚未修复：谢谢，这对我有帮助。flex儿童会自动拉伸到容器的高度吗？这就是为什么这样做的原因吗？@ReeceKenney，是的，请注意问题。我在回答中对此进行了解释。请参阅解决方案4。我使用高度：自动修复了我的问题。这是一篇很棒的文章“对齐项目：拉伸”的解释链接中的一些注释使flex子对象跨容器的横轴展开-即将子对象拉伸到高度，flex容器的flex方向应为行。我可以确认使用嵌套flex容器效果最佳。我们在菜单中使用flexbox时不一致。我们在父容器上使用的不是flex:1和display:flex，而是height:100%在某些地方。在我们替换了相应的定义后，一切都按预期进行了。谢谢@Michael_B的提示！：）@JamesHarrington，CSS随着时间的推移而增长，而且很复杂；-）每个解决方案都应该是不同的答案。我如何才能以这种方式投票给特定的解决方案？为我解决了它！真是一个救命恩人。我非常希望这个解决方案奏效k、 但是我最终把容器从ViewPort的底部拿了下来，这是一个比所选答案更容易阅读的解决方案。非常感谢。在此之前，我不明白为什么在safari上重定向到另一个页面时我的身高只有1px。天哪，非常感谢你让我免于如此头痛！
display:-webkit-box；
is exactl这就是我所需要的。事实证明，即使在2020年底，iOS设备仍然没有可预测的flex支持Jeez，谢谢谢谢谢谢！！！这件事让我疯狂了将近一个月，然后我读了这篇评论！！！
.container {
    flex: 0 0 auto;
}