Flex容器的高度错误Safari [重复]答案

【问题标题】：Flex container gets height wrong Safari [duplicate]Flex容器的高度错误Safari [重复]
【发布时间】：2019-12-11 03:38:09
【问题描述】：

我有一个 flex 容器，有两个孩子（蓝色的），其中一个的高度为 600px。

因此，父级应该采用它的高度并使其另一个子级也具有相同的高度，因为它在 chrome 上是正确的。

在 Chrome v75.0.3 上

尽管在 Safari 上，父级不会从其最大的子级高度派生它的高度。

在 Safari v13.0 上

下面是temp.htm 文件，我用它来重现问题。

<!DOCTYPE html>
<html>
<head>
<style>

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

</style>
</head>
<body style="display: flex; flex-direction: column; width: 100%; background-color: #ff0">

<div style="display: flex; flex-direction: row">
    <div style="background-color: #00f; width: 75%; margin: 50px; flex-basis: content">
    </div>
    <div style="background-color: #00f; margin: 50px; width: 25%; height: 600px; flex-basis: content">
    </div>
</div>
<div style="display: flex; flex-direction: row">
    <div style="background-color: #f00; width: 75%; margin: 50px; flex-basis: content">
    </div>
    <div style="background-color: #f00; margin: 50px; width: 25%; height: 600px; flex-basis: content">
    </div>
</div>

</body>
</html>

【问题讨论】：

您是否尝试为 flex 容器添加 display:-webkit-flex ？
@KareemDabbeet 实际上，我希望我的代码可以在多个浏览器上运行，并且我使用的 safari 版本支持 flex，所以如果我同时使用 flex 和 -webkit-flex，那就行不通了在 safari 上，如果我只使用 -webkit-flex，它可能会影响在 safari 以外的浏览器上的体验。
将flex-shrink: 0 添加到嵌套容器中。 jsfiddle.net/k1c5mhg3/2
这行得通！谢谢

标签： html css safari flexbox

【解决方案1】：

试试下面的

在身体上：

// remove the following
  height: 100%;
  flex-direction: column;

// add
  flex-wrap: wrap;

在弹性行（包含您的彩色块）上：

// add this
  flex: 0 0 100%;

【讨论】：