Flex 网格在 Safari 上未正确呈现 - 弹性项目上没有高度
Posted
技术标签:
【中文标题】Flex 网格在 Safari 上未正确呈现 - 弹性项目上没有高度【英文标题】：Flex grid not rendered correctly on Safari - no height on flex items 【发布时间】：2019-10-31 13:39:43 【问题描述】：这是一个在 Chrome 和 Safari 上运行的简单 html 表格：
.container
height: 100vh;
overflow-y: hidden;
background-color: black;
color: white;
.rows-container
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
background-color: blue;
.row-container
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
border: 1px solid cyan;
<div class="container">
<h1>TEST</h1>
<div class="rows-container">
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
</div>
</div>在 Chrome 上一切看起来都很好，行正在正确呈现。
但在 Safari 上，行没有得到正确的高度，一个重叠在另一个之上（见下图）。
这是一个简单的 flex 使用，所以看起来是我缺少的东西。
如何正确修复代码，使其在 Safari、Chrome 和 IE (Edge) 上都能正确显示？
我在 MacOS Mojave 上使用 Safari 12.1.1。
【问题讨论】：
看到 Safari 呈现它的方式是多么的疯狂。 chrome是预期的布局吗？为什么身高：一切都 100%？ 是的，Chrome 是预期的布局。 flex 容器的高度是必要的，因为该组件被添加到对象链中。在弹性项目上只是尝试使其成为 Worley... 对我来说在 Safari 中看起来不错：codepen.io/anon/pen/JQKygq @jons，在 codepen 上对我来说也很好......但是当你点击上面的“运行代码片段”时，我得到了这个错误的行为，以及我的应用程序......非常奇怪... 很奇怪。您确定设置为 100% 的高度不会导致其中的某些部分吗？ 【参考方案1】：Safari 以不同于其他浏览器的方式呈现 flex-shrink。
只需在行项目上禁用它。
将此添加到您的代码中：
.row-container
flex-shrink: 0;
jsFiddle demo
.container
height: 100vh;
display: flex;
flex-direction: column;
background-color: black;
color: white;
.rows-container
display: flex;
flex-direction: column;
overflow-y: auto;
background-color: blue;
.row-container
flex-shrink: 0; /* new */
display: flex;
border: 1px solid cyan;
h1
margin: 0;
body
margin: 0;
<div class="container">
<h1>TEST</h1>
<div class="rows-container">
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
</div>
</div>【讨论】：
我的理由是找到一种方法来增加行高，但解决方案是让它不缩小......感谢您的帮助 - 就像一个魅力。以上是关于Flex 网格在 Safari 上未正确呈现 - 弹性项目上没有高度的主要内容，如果未能解决你的问题，请参考以下文章
在 Chrome、Safari 和 Edge 中显示 flex 对齐不正确，但在 Firefox 中正确
Safari flex 内容上方的子水平滚动条（内容高度不正确）
使用 jquery 的 Chrome 上的 Flex 无法正确呈现