Safari iOS、Safari MacOS 和 Chrome 之间的渲染不一致

Question

我正在构建一个个人作品集网站，并希望确保我的网站对移动设备和桌面设备均具有响应能力。使用 Chrome 开发工具确保间距在各种移动设备上看起来不错后，我在 Safari 移动模拟器上检查了网站的外观，发现布局看起来非常奇怪（见下图）。

我认为这与 -webkit CSS 样式未正确使用有关，但我无法找到要应用的内容。父容器的大小正确为 100vh，但是，子容器的目的是长大以填满容器，但显然达不到这一点。

<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>

上面是我当前使用的 HTML 和 Tailwind 样式（最小可重现示例），我是否在这里遗漏了一些东西，或者我对 flex-grow 如何在 Safari / 移动设备上工作的假设不正确？

指向实时网站的链接 和代码。

此问题在移动网站上的大多数部分中都存在，但在页脚组件上最为明显。

Answer 1

在最后一部分的情况下，最外面的包装 div 缺少

grow

声明。您可以看到第二个最外面的包装纸有一个

grow

，但最外面的包装纸没有。

<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>