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

css CSS

卡卡西

2020-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>

第4069篇《Chrome / Safari无法填充Flex父级的100％高度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
阿飞 2020.04.07

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

通过将height和min-height属性都添加到CSS类，我设法使其正常工作。

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

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

希望这可以帮助！

Stafan路易 2020.04.07

对于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%从子元素中删除。

樱小胖Mandy 2020.04.07

我在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%;
}
梅 2020.04.07

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

.container {
    flex: 0 0 auto;
}

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

Itachi 2020.04.07

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android