Safari 中 Flex、列和网格的奇怪问题

Question

任何人都可以向我解释这是否是一个错误或者我应该向 Safari 团队报告什么

在除 Safari 之外的任何浏览器中，我都能得到正确的渲染：

https://play.tailwindcss.com/uzqrEtPtKX

<div class="flex min-h-screen flex-col flex-wrap">
  <div class="grid gap-5 grid-cols-2">
    <div>Hello</div>
    <div>Hello</div>
    <div>World</div>
    <div>World</div>
  </div>
</div>

但是在 Safari 中，对象沿着页面分布，我不明白为什么。

Answer 1

此问题的常见解决方法是使用

height

而不是

min-height

。然而，这可能并不适合所有情况，因为它设置了固定的高度。

另一个解决方法是在 Flex 容器周围添加一个额外的包装器，并将该包装器设置为全高块。

<div class="h-screen">
  <div class="flex flex-col flex-wrap">
    <div class="grid gap-5 grid-cols-2">
      <div>Hello</div>
      <div>Hello</div>
      <div>World</div>
      <div>World</div>
    </div>
  </div>
</div>

在此代码中，具有

div

类的外部

h-screen

设置固定高度

100vh

，并且具有

div

类的内部

flex

现在可以在 Safari 中按预期运行。