Question

这是在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。

Answer 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上正确呈现-Flex项目没有高度

1 个答案: