I’m aware of restrictions about height with safari especially with this article /a/33644245

<div class="flex min-h-screen flex-col">
  <main class="flex flex-1 flex-col">
    <section class="grid flex-1 grid-cols-2 gap-5 px-4 bg-red-200">
      <div class="bg-green-200">A</div>
      <div class="bg-blue-200">B</div>
    </section>
  </main>
  <footer class="bg-black h-20 mb-5"></footer>
</div>

Here is my sandbox equivalent https://play.tailwindcss.com/01Es34U9HE?layout=horizontal

Can you explain me why this overflow on safari only ? How to fix this ?

Thanks