Flex 网格在 Safari 上未正确呈现 - 弹性项目上没有高度答案

【问题标题】：Flex grid not rendered correctly on Safari - no height on flex itemsFlex 网格在 Safari 上未正确呈现 - 弹性项目上没有高度
【发布时间】：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% 的高度不会导致其中的某些部分吗？

标签： html css safari flexbox

【解决方案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>

【讨论】：

我的理由是找到一种方法来增加行高，但解决方案是让它不缩小......感谢您的帮助 - 就像一个魅力。