Safari中Flex列布局元素溢出问题求助

以下是实现全屏应用布局的HTML和CSS代码，布局包含头部导航、内容区和底部导航，内容区通过Grid分为主内容栏与侧边栏，需求是让按钮固定在页面底部：

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

HTML代码 #

<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（124）及Chrome：显示正常
  
• Safari（189）：存在异常
  

在Safari中，按钮被挤出主内容区域之外，布局错位。

已测试的无效方案 #

• 移除.container的min-height: 100vh可修复问题，但无法满足页面占满视口且支持内容溢出的需求；
• 移除.grid-content及aside元素可解决问题，但Grid是布局必需的组件；
• 在特定视口高度下按钮会恢复正常，推测Safari的高度计算未正确考虑外部头部和底部导航的占用空间。

解决方案 #

仅需对.grid-content添加一行CSS即可修复Safari的布局异常，无需修改HTML结构：

.grid-content {
  /* 保留原有属性 */
  min-height: 0; /* 添加此属性 */
}

原因：WebKit内核浏览器在处理flex子项中的grid布局时，若未显式设置min-height: 0，会默认将子项高度设为内容所需高度，忽略flex容器的约束，导致内部元素溢出。添加min-height: 0后，grid容器会遵循flex父项的高度限制，内部的flex布局（.form-content）就能正确计算高度，将按钮固定在底部。

内容的提问来源于stack exchange，提问作者Frank Lämmer