嵌套flex-grow元素未按预期工作，按钮栏无法固定显示问题

问题原因 #

当前布局未达预期的核心原因：

1. #body 无明确高度约束，高度完全由子元素内容撑开，当屏幕缩小、#body-content 内容溢出时，#body 整体高度会超出视口，导致 #body-buttons 被推至 #body 容器底部（而非视口底部），无法保持可见。
2. #body-content 未设置空间约束与滚动规则，既无高度限制也未开启 overflow:auto，内容溢出时会直接撑开父容器，而非自身产生滚动条。

不修改DOM结构的解决方案 #

通过 Flexbox 布局 即可实现需求，具体CSS调整如下：

/* 假设标题栏有固定高度，如50px；若为自适应高度，可改用Grid布局 */
#title {
  height: 50px;
}

#body {
  /* 让#body占据视口剩余高度 */
  height: calc(100vh - 50px);
  /* 启用垂直方向的Flex布局 */
  display: flex;
  flex-direction: column;
}

#body-content {
  /* 填充#body的剩余空间 */
  flex: 1;
  /* 内容溢出时显示滚动条 */
  overflow-y: auto;
}

#body-buttons {
  /* 禁止按钮区被压缩，保持自身高度 */
  flex-shrink: 0;
}

若标题栏高度自适应，可改用 Grid布局 无需手动计算高度：

/* 给包裹title+body的最外层容器设置Grid */
.wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

#body {
  display: grid;
  grid-template-rows: 1fr auto;
}

#body-content {
  overflow-y: auto;
}

原理说明 #

• Flexbox 核心逻辑：父容器设置固定高度并启用垂直Flex布局后，flex:1 的子元素会自动填充父容器剩余空间，高度被父容器约束；此时给该元素设置 overflow-y:auto，内容超出时会在自身内部滚动，而非撑开父容器。flex-shrink:0 确保按钮区不会被压缩，固定在容器底部。
• Grid 核心逻辑：grid-template-rows: 1fr auto 将容器高度划分为“剩余空间”与“自适应高度”两部分，内容区占满剩余空间，按钮区根据自身内容确定高度，天然实现滚动与固定的效果。

若需调整DOM结构的情况（一般无需） #

如果因样式冲突无法使用Flex/Grid，可将 #body-buttons 从 #body 中移出作为独立兄弟元素，通过固定定位实现：

<div id="title"></div>
<div id="body">
  <div id="body-content"></div>
</div>
<div id="body-buttons"></div>

#body {
  height: calc(100vh - 50px - 按钮区高度);
  overflow-y: auto;
}

#body-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

此方案需额外处理内容区与按钮区的底部间距，避免内容被遮挡，不如Flex/Grid方案优雅。

内容的提问来源于stack exchange，提问作者Andre Pena