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

卡卡西 · 04月07日

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

每个孩子都必须填满父母的身高,并且中间对齐文本。

孩子的数量是随机的,因此我必须使用动态值。

Div .container包含随机数的子代(.item),子代总是必须填充父代的高度。为此,我使用了flexbox。

为了使文本居中对齐,我使用了display: table-cell技巧。但是使用表格显示需要使用高度100%。

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

  1. 有解决此问题的方法吗?
  2. 还是有一种不同的技术可以使所有.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>

CSScss
回答(5)
时间
阿飞
5 · 2020-04-07 11:21:12

我有一个类似的错误,但是使用的是固定高度而不是百分比。它也是体内的弹性容器(没有指定高度)。似乎在Safari上,由于某种原因,我的flex容器的高度为9px,但在所有其他浏览器中,它都显示了样式表中指定的正确100px高度。

通过将heightmin-height属性都添加到CSS类,我设法使其正常工作

以下内容适用于Safari 13.0.4和Chrome 79.0.3945.130:

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  height: 100px;
}

希望这可以帮助!

神奇
4 · 2020-04-07 11:21:12

对于Mobile Safari,有一个浏览器修复程序。您需要为iOS设备添加-webkit-box

例如

display: flex;
display: -webkit-box;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
align-items: stretch;

如果您将align-items: stretch;属性用于父元素,请height : 100%从子元素中删除

G
Green
3 · 2020-04-07 11:21:12

我在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%;
}
2 · 2020-04-07 11:21:12

为容器指定flex属性对我有用:

.container {
    flex: 0 0 auto;
}

这样可以确保高度已设置且不会增大。

I
Itachi
1 · 2020-04-07 11:21:12

解决方案:删除height: 100%.item-内,并添加display: flex.item

演示:https : //codepen.io/tronghiep92/pen/NvzVoo

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序