html - Flex 容器获取高度错误的 Safari

<分区>

我有一个 flex 容器，有两个 child (蓝色的)，其中一个的高度为 600px。

因此， parent 应该已经取得了它的高度并使它的另一个 child 也具有相同的高度，因为它是在 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>

最佳答案

尝试以下操作

在 body 上:

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

// add
  flex-wrap: wrap;

在 flex 行上(包含您的彩色 block ):

// add this
  flex: 0 0 100%;

关于html - Flex 容器获取高度错误的 Safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57327663/

上一篇：html - 当我将鼠标悬停在下拉菜单上时，下拉菜单消失了

下一篇：javascript - 如何使用 1 个按钮取消单击其他按钮

相关文章：

css - WebKit CSS 内容 Unicode 错误？

css - 透明 iFrame : shows text/content on the underlying page's background

html - 带有点击事件的非javascript多行控件

javascript - 我可以获得 Caman.js 过滤器的列表吗？

css - 将悬停样式应用于任何 child 但不是 parent

iphone - 使用 java 脚本或任何其他方式检查应用程序是否已从 safari "Browser"安装在 iOS 上。

php - 基于PHP代码设置单选按钮的值

javascript - 正确的 jQuery 来替换 <span> 元素中的内容

html - 如何在第一段(<p> 标记)内围绕图像将文本换行到不同段落。 (内容使用CKeditor Plugin输入)

javascript - jQuery 与 Safari 自动完成功能对比