本文介绍如何利用 css grid 的天然流式行为，让上下两个区域根据内容多少自动伸缩高度，同时限制单个区域最大不超过容器高度的 50%，无需 javascript 即可实现响应式、内容驱动的高度分配。
本文介绍如何利用 css grid 的天然流式行为，让上下两个区域根据内容多少自动伸缩高度，同时限制单个区域最大不超过容器高度的 50%，无需 javascript 即可实现响应式、内容驱动的高度分配。
在构建垂直布局（如面板、编辑器、聊天窗口等）时，常需满足一个关键交互需求：内容少的区域应收缩，把空间让给内容多的区域；但任一区域都不能无限扩张，需有明确上限（例如各不超过容器高度的 50%）。使用 Flexbox 的 flex: 1 虽能均分空间，却无法实现“按内容自然伸缩 + 有上限”的双重目标——因为 flex: 1 强制弹性分配，会忽略内容真实高度。
而 CSS Grid 天然支持这种“基于内容的自动尺寸 + 可控约束”行为，只需合理设置容器和子项的 display 与 overflow，即可优雅达成目标。
✅ 推荐方案：CSS Grid + overflow: auto
核心思路是：
- 容器设为
display: grid，不声明显式行轨道（即不写grid-template-rows），让 Grid 自动采用grid-auto-rows: auto行为； - 子元素不设
flex相关属性，仅设置overflow: auto（触发块级格式化上下文并启用滚动）； - Grid 会优先按内容高度分配空间，当内容超出容器总高时，
overflow: auto确保内容可滚动，且不会突破容器边界； - 若两区域内容均较多，Grid 会自动将可用高度在二者间公平分配（接近 1:1），天然满足“各 ≤ 50%”的约束。
.container {
display: grid;
height: 300px; /* 固定容器高度 */
}
.topDiv,
.bottomDiv {
overflow: auto; /* 关键：启用滚动，防止溢出 */
}
.topDiv {
background-color: #1e88e5;
color: white;
}
.bottomDiv {
background-color: #43a047;
color: white;
}
? 使用效果说明
| 场景 | 行为 |
|---|---|
| 上区内容少，下区内容多 | 上区按内容高度收缩（如仅 60px），下区自动占据剩余空间（约 240px），且可滚动 |
| 下区内容少，上区内容多 | 同理，下区收缩，上区扩展并滚动 |
| 双方内容均超长 | Grid 平衡分配高度（接近各 150px），双方均出现滚动条，严格满足 ≤50% 限制 |
? 注意：此方案不依赖
minmax()或fr单位，避免了1fr带来的强制均分陷阱；auto行高 +overflow: auto的组合才是实现“内容驱动伸缩”的关键。
⚠️ 注意事项与优化建议
-
务必为两个子元素都设置
overflow: auto（或overflow: overlay/scroll），否则无内容溢出时无法触发滚动机制，可能导致布局异常； - 若需在内容极少时保留最小高度（如至少 50px），可添加
min-height: 50px到对应子元素，Grid 仍会尊重该约束； - 不要给子元素设置
height: 100%或flex相关属性，这会破坏 Grid 的自动尺寸计算； - 在 Safari 等旧版浏览器中，建议添加
-webkit-overflow-scrolling: touch提升滚动体验（移动端）； - 如需精确控制最大高度（如强制 ≤50%），可在极端情况下配合
max-height: 50%，但通常 Grid 的自然分配已足够可靠。
此方案简洁、语义清晰、兼容性好（支持所有现代浏览器及 IE11+），是解决“内容自适应双栏垂直布局”问题的最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
