Safari 将元素放置在 Flex 列之外

Question

我有以下 HTML 和 CSS：

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  gap: 2px;
}

.header-nav,
.footer-nav,
.container {
  padding: 4px;
}

.main-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  border-radius: 1rem;
  background-color: #F1F5F9;
  padding: 6px;
}

.grid-content {
  display: grid;
  flex-grow: 1;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flex-content {
  flex: 1;
}

.button {
  background-color: #1E3A8A;
  padding: 4px;
  color: #BFDBFE;
}

<div class="container">
  <nav class="header-nav">Header navigation</nav>
  <main class="main-content">
    <div class="grid-content">
      <form class="form-content">
        <div class="flex-content">
          Main content form
        </div>
        <button class="button">Button</button>
      </form>
      <aside>Aside</aside>
    </div>
  </main>
  <nav class="footer-nav">Footer navigation</nav>
</div>

这是一个完整的页面应用程序布局。它创建一个页眉、一个内容区域和一个页脚。内容区有两栏，一栏为主要内容，一栏为旁白。我的目标是将按钮放置在页面底部。请注意参考图像上的按钮。

Firefox（和 Chrome）- 一切都好

Safari - 问题

在 Safari 中，该按钮位于主要内容区域之外。

游乐场

• Codepen - 此标记
• Tailwind 游戏 - 通过 Tailwind 扩展

最佳解决方案不会过多改变标记。这是一个带有嵌套 Web 组件的 Web 应用程序。我不想重构模板逻辑。

标记在 Firefox (124) 和 Chrome 中工作正常，但在 Webkit (Safari 189) 中失败。我在这里检查过类似的问题，但我认为这可能是独一无二的。我希望遗漏一些明显的东西。

我已经测试过：

• 删除

  min-height: 100vh

  上的

  .container

  将解决该问题。但我想让页面填充视口。 height: 100% 也不适合我的用例，因为内容可能会更大。
• 删除 .grid-content （以及旁边的内容）也会使问题消失。需要网格来显示导航。
• 到达一定高度后，阈值会跳回所需位置。奇怪的！也许高度计算没有考虑外部页眉和页脚。

Answer 1

Safari 总是做奇怪的事情，但是，我找到了解决此问题的两个解决方案：

解决方案1：

里面

.grid-content

添加

grid-template-rows: 1fr

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  gap: 2px;
}

.header-nav,
.footer-nav,
.container {
  padding: 4px;
}

.main-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  border-radius: 1rem;
  background-color: #F1F5F9;
  padding: 6px;
}

.grid-content {
  display: grid;
  flex-grow: 1;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: 1fr
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flex-content {
  flex: 1;
}

.button {
  background-color: #1E3A8A;
  padding: 4px;
  color: #BFDBFE;
}

<div class="container">
  <nav class="header-nav">Header navigation</nav>
  <main class="main-content">
    <div class="grid-content">
      <form class="form-content">
        <div class="flex-content">
          Main content form
        </div>
        <button class="button">Button</button>
      </form>
      <aside>Aside</aside>
    </div>
  </main>
  <nav class="footer-nav">Footer navigation</nav>
</div>

解决方案2：

在

.main-content

内指定具有任意值的

height

属性，即使它是

1px

。

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  gap: 2px;
}

.header-nav,
.footer-nav,
.container {
  padding: 4px;
}

.main-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  border-radius: 1rem;
  background-color: #F1F5F9;
  padding: 6px;
  height: 1px;
}

.grid-content {
  display: grid;
  flex-grow: 1;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flex-content {
  flex: 1;
}

.button {
  background-color: #1E3A8A;
  padding: 4px;
  color: #BFDBFE;
}

<div class="container">
  <nav class="header-nav">Header navigation</nav>
  <main class="main-content">
    <div class="grid-content">
      <form class="form-content">
        <div class="flex-content">
          Main content form
        </div>
        <button class="button">Button</button>
      </form>
      <aside>Aside</aside>
    </div>
  </main>
  <nav class="footer-nav">Footer navigation</nav>
</div>