当使用 CSS Grid 构建表格布局并嵌套在 Flex 容器中时，若未显式限制高度或设置溢出行为，Grid 内容可能超出父容器边界。解决方法是在 .container 上添加 overflow: auto（推荐）或 overflow: scroll，确保内容可滚动且容器尺寸可控。
当使用 css grid 构建表格布局并嵌套在 flex 容器中时，若未显式限制高度或设置溢出行为，grid 内容可能超出父容器边界。解决方法是在 `.container` 上添加 `overflow: auto`（推荐）或 `overflow: scroll`，确保内容可滚动且容器尺寸可控。
在您的布局中，.container 使用了 display: flex; flex-direction: column; height: 100%，本意是让其占据视口全高。但问题在于：Grid 和嵌套的 Flex 表格（如 .flex-table、.flex-row）未受高度约束，导致内部内容持续撑开容器，突破 height: 100% 限制，最终造成视觉上的“溢出”——即红色背景（.container 背景色）提前终止，而内容继续向下延伸。
根本原因并非 Grid 本身不兼容 Flex，而是 缺乏内容高度管控机制。height: 100% 在 Flex 子项中仅对“有明确高度上下文”的元素生效；而当子内容（尤其是动态生成的多行表格数据）高度不可预知时，必须通过 overflow 显式定义容器如何处理溢出。
✅ 正确解法：为 .container 添加 overflow: auto（优于 scroll）
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 建议改用 vh 单位，更可靠 */
padding: 3px;
background-color: red;
overflow: auto; /* ✅ 关键修复：允许滚动，同时保持容器尺寸稳定 */
}
⚠️ 注意事项：
-
overflow: scroll会始终显示滚动条（即使内容未溢出），影响美观；overflow: auto则仅在必要时显示，更符合用户体验。 -
height: 100%在html/body链中依赖父级高度。建议将.container高度设为100vh（视口高度），避免因html/body的height: 100%潜在失效导致计算错误。 - 若需让
<main></main>区域自适应并撑满剩余空间（而非随内容无限增长），应为其设置flex: 1并确保其父.container高度已锁定：
.container > main {
flex: 1; /* 确保 main 占据剩余可用空间 */
overflow-y: auto; /* 可选：为 main 内部内容单独加滚动，提升局部体验 */
}
? 进阶优化建议：
- 对
.grid或.ordini .flex-table等长列表容器，可额外添加max-height: 100%配合overflow-y: auto，实现“容器内局部滚动”，避免整页滚动干扰头部/尾部固定区域。 - 使用
min-height: 0防止 Flex 子项最小高度干扰（尤其在嵌套 Flex 中）：
.container > * {
min-height: 0; /* 防止 flex item 默认最小高度撑开容器 */
}
总结：CSS Grid 与 Flex 布局完全兼容，溢出问题本质是高度管理缺失。通过 overflow: auto + height: 100vh 组合，即可精准控制容器尺寸边界，让 Grid 表格优雅地包裹在红色背景之内，同时保障内容可访问性与布局稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
