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

解决方案

使用嵌套的弹性容器。

摆脱百分比高度。摆脱表属性。摆脱 vertical-align。避免绝对定位。 一直坚持使用 flexbox。

将 display: flex 应用于弹性项目 (.item)，使其成为弹性容器。这会自动设置 align-items: stretch，它告诉子 (.item-inner) 扩展父的完整高度。

重要提示：从 flex 项中删除指定的高度以使此方法起作用。 如果子项具有指定的高度（例如 height: 100%），那么它将忽略来自父项的 align-items: stretch。要使 stretch 默认值起作用，孩子的身高必须计算为 auto (full explanation)。

试试这个（不更改 HTML）：

.container { 显示：弹性；弹性方向：列；高度：20em；边框：5px 纯黑色 } .item { display: flex; /* 新的;嵌套的 flex 容器 */ flex: 1;边框底部：1px 纯白色； } .item-inner { 显示：弹性； /* 新的;嵌套的 flex 容器 */ flex: 1; /* 新 */ /* 高度：100%; <-- 删除；不必要的 */ /* 宽度：100%; <-- 删除；不必要的 */ /* display: table; <-- 删除；不必要的 */ } a { display: flex; /* 新的;嵌套的 flex 容器 */ flex: 1; /* 新 */ align-items: center; /* 新的;垂直居中文本 */ 背景：橙色； /* 显示：表格单元格； <-- 删除；不必要的 */ /* 垂直对齐：中间； <-- 删除；不必要的 */ }

jsFiddle demo

解释

我的问题是 .item-inner { height: 100% } 在 webkit (Chrome) 中不起作用。

它不起作用，因为您使用百分比高度的方式不符合规范的传统实现。

10.5 内容高度：height 属性百分比 指定百分比高度。该百分比是相对于生成框的包含块的高度计算的。如果未明确指定包含块的高度并且此元素不是绝对定位的，则该值计算为 auto。 auto 高度取决于其他属性的值。

换句话说，要使百分比高度适用于流入的孩子，父母必须有一个设定的高度。

在您的代码中，顶级容器具有定义的高度：.container { height: 20em; }

第三级容器具有定义的高度：.item-inner { height: 100%; }

但在它们之间，第二级容器 - .item - 没有定义高度。 Webkit 认为这是一个缺失的环节。

.item-inner 告诉 Chrome：给我height: 100%。 Chrome 会查看父级 (.item) 以供参考并回应：100% 的什么？我什么也没看到（忽略那里的 flex: 1 规则）。因此，它根据规范应用 height: auto（内容高度）。

另一方面，Firefox 现在接受父母的弹性高度作为孩子身高百分比的参考。 IE11 和 Edge 也接受弹性高度。

此外，如果将 flex-grow 与 flex-basis 结合使用，Chrome 将接受 flex-grow 作为适当的父引用（任何数值都有效（auto 无效），包括 flex-basis: 0）。然而，在撰写本文时，此解决方案在 Safari 中失败。

#outer { 显示：弹性；弹性方向：列；高度：300px；背景颜色：白色；边框：1px 纯红色； } #middle { 弹性增长：1;弹性基础：1px；背景颜色：黄色； } #inner { 高度：100%;背景颜色：浅绿色； }

四种解决方案

1.在所有父元素上指定一个高度

一个可靠的跨浏览器解决方案是在所有父元素上指定一个高度。这可以防止丢失链接，基于 Webkit 的浏览器认为这些链接违反了规范。

请注意，min-height 和 max-height 是不可接受的。它必须是 height 属性。

更多详细信息：Working with the CSS height property and percentage values

2. CSS 相对和绝对定位

将 position: relative 应用于父级，将 position: absolute 应用于子级。

使用 height: 100% 和 width: 100% 调整子级的大小，或使用偏移属性：top: 0、right: 0、bottom: 0、left: 0。

使用绝对定位，百分比高度可以在父节点上没有指定高度的情况下工作。

3.删除不必要的HTML容器（推荐）

button 周围是否需要两个容器？为什么不删除 .item 或 .item-inner，或两者都删除？尽管 button elements sometimes fail as flex containers，它们可以是弹性项目。考虑将 button 设为 .container 或 .item 的子节点，并删除无偿标记。

这是一个例子：

.container { 高度：20em;显示：弯曲；弹性方向：列；边框：5px 纯黑色 } a { flex: 1;背景：橙色；边框底部：1px 纯白色；显示：弯曲； /* 嵌套的 flex 容器（用于对齐文本） */ align-items: center; /* 垂直居中文本 */ justify-content: center; /* 水平居中文本 */ }

4. 嵌套 Flex 容器（推荐）

摆脱百分比高度。摆脱表属性。摆脱 vertical-align。避免绝对定位。 一直坚持使用 flexbox。

将 display: flex 应用于弹性项目 (.item)，使其成为弹性容器。这会自动设置 align-items: stretch，它告诉子 (.item-inner) 扩展父的完整高度。

重要提示：从 flex 项中删除指定的高度以使此方法起作用。 如果子项具有指定的高度（例如 height: 100%），那么它将忽略来自父项的 align-items: stretch。要使 stretch 默认值起作用，孩子的身高必须计算为 auto (full explanation)。

试试这个（不更改 HTML）：

.container { 显示：弹性；弹性方向：列；高度：20em；边框：5px 纯黑色 } .item { display: flex; /* 新的;嵌套的 flex 容器 */ flex: 1;边框底部：1px 纯白色； } .item-inner { 显示：弹性； /* 新的;嵌套的 flex 容器 */ flex: 1; /* 新 */ /* 高度：100%; <-- 删除；不必要的 */ /* 宽度：100%; <-- 删除；不必要的 */ /* display: table; <-- 删除；不必要的 */ } a { display: flex; /* 新的;嵌套的 flex 容器 */ flex: 1; /* 新 */ align-items: center; /* 新的;垂直居中文本 */ 背景：橙色； /* 显示：表格单元格； <-- 删除；不必要的 */ /* 垂直对齐：中间； <-- 删除；不必要的 */ }

jsFiddle

---

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

.container {
    flex: 0 0 auto;
}

这样可以确保设置高度并且也不会增长。

---

解决方法：去掉.item-inner中的height: 100%，在.item中添加display: flex

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

---

对于 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%。

---

我在 iOS 8、9 和 10 中遇到过类似的问题，上面的信息无法修复它，但是经过一天的工作后我确实找到了解决方案。当然，它不适用于所有人，但在我的情况下，我的项目被堆叠在一列中，并且当它应该是内容高度时高度为 0。将 css 切换为 row 并 wrap 解决了这个问题。这仅在您有一个项目并且它们堆叠时才有效，但由于我花了一天时间才发现这一点，我想我应该分享我的修复！

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

.item {
    width: 100%;
}

---