CSS Grid单元格内表格滚动异常问题求助

核心问题在于你的CSS Grid布局中，第二行容器未被限制高度，导致card-body无法获得可计算的高度基准，overflow:auto无法触发内部滚动，最终溢出内容撑大页面，出现全局滚动条。

具体修改步骤： #

1. 给Grid容器设置明确高度，让它占满视口：

.dashboard-grid {
  display: grid;
  grid-template-rows: 80px 1fr; /* 顶部固定80px，第二行自适应剩余空间 */
  height: 100vh; /* 关键：让Grid容器填满视口高度 */
  margin: 0;
}

2. 让卡片容器使用弹性布局，确保card-body能填充剩余空间：

.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 让卡片占满Grid单元格高度 */
}

.card-body {
  flex: 1; /* 占据卡片内除头部外的所有剩余空间 */
  overflow: auto; /* 内容溢出时显示内部滚动条 */
}

3. 移除页面默认边距，避免不必要的全局滚动：

body {
  margin: 0;
  overflow: hidden; /* 可选：彻底禁用页面全局滚动条 */
}

修改后，窗口高度缩小时，Grid第二行高度会被限制在视口剩余空间内，card-body因flex:1获得固定可用高度，内容溢出时将触发内部滚动条，而非撑大页面。

内容的提问来源于stack exchange，提问作者Rob Goodwin