Question

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

因此，父对象应该已经将其高度设为另一个孩子的高度，因为在Chrome上正确完成了此操作。

在Chrome v75.0.3上

尽管在Safari上，父级并没有从最大的子级height推导出其高度。

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

Answer 1

尝试以下

在身体上：

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

// add
  flex-wrap: wrap;

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

// add this
  flex: 0 0 100%;

Flex容器的高度错误Safari

1 个答案: