Rendering inconsistencies between Safari iOS, Safari MacOS, and Chrome

I'm building a personal portfolio website and want to make sure that my site is responsive for both mobile and desktop. After using the Chrome devtools to make sure the spacing looks good on various mobile devices I've checked what the site looks like on a Safari mobile simulator to see the layout shifts up compared with on desktop (see image below). I expect the "Get in touch" button to be stuck to the bottom with the div element above it growing to fill the available space - instead, the button floats somewhere in the middle of the page.

I assume this is to do with -webkit CSS styles not being used correctly but I'm unable to find what to apply. The parent container is correctly 100vh, however, the child is meant to grow to fill the container and clearly falls short of this.

<section className="h-screen w-screen">

  <div className="flex flex-col h-full">
      <div className="grow">{content}</div>

      <Button className="w-full">
          Get in touch
      </Button>
  </div>

</section>

Above is the HTML and Tailwind styles I'm currently using (minimum reproducible example), am I missing something here or gotten my assumptions incorrect on how flex-grow is meant to work on Safari / mobile?

Links to the live site and the code.

This issue is seen across most of the sections on the site on mobile but is most obvious on the footer component.

Use Safari’s web inspector to debug this. From the Develop menu in Safari you can connect to a webpage running in Simulator, or to an iOS device connected to your computer with a cable.

First, inspect the bottom section (containing the "get in touch" button). The <section> itself appears to be the correct height; the inspector has outlined it in yellow:

Next, inspect the child <div> inside this section. The inspector outlines it in pink, and it is clearly too short; 570 pixels instead of 612 pixels:

Looking at the code, you can see that this first <div> is missing a grow class ... it’s not growing to fill its container. The second wrapper <div> has a grow, but the first one does not. Both wrappers need to grow. Add the grow class to the first <div> and the problem will be resolved.

<section class="relative flex h-screen w-screen snap-start flex-col rounded-xl border-4 bg-[var(--background)] sm:border-8 sm:border-[var(--foreground)]" style="/* align-items: start; */">
  <div class="flex h-full flex-col bg-[var(--foreground)]">
    <div class="relative flex grow flex-col rounded bg-[var(--background)]">
      ...
      <button>Get in touch</button>
    </div>
  </div>
</section>