本文介绍如何利用 css grid 的天然流式行为，替代 flexbox 实现两个垂直排列区域（如上下分栏）的智能高度分配：内容少时自动收缩，内容多时按需扩展，且双方高度均不超过容器的 50%。
本文介绍如何利用 css grid 的天然流式行为，替代 flexbox 实现两个垂直排列区域（如上下分栏）的智能高度分配：内容少时自动收缩，内容多时按需扩展，且双方高度均不超过容器的 50%。
在响应式布局中，常需实现“内容驱动的高度分配”——即上/下两个区块根据各自内容量动态调整高度：内容少则收缩留白，内容多则自然撑开，但任一区块都不应独占过多空间（例如超过容器高度的 50%）。虽然直觉上容易想到 flex: 1，但 Flexbox 的 flex: 1 在 column 方向下会强制均分剩余空间，无法实现“按内容自然伸缩 + 上限约束”的双重目标。
CSS Grid 是更简洁、更符合语义的解决方案。
Grid 布局默认采用“基于内容的轨道尺寸”（intrinsic sizing），配合 overflow: auto，即可天然达成所需行为：
- 当一个区域内容较少时，其行轨道（grid row）仅占用最小必要高度；
- 另一个区域则自动占据剩余空间；
- 若两者内容都较多，Grid 会依据内容实际高度分配空间，当总高度超出容器时，滚动条自动出现，且无单侧溢出风险；
- 更重要的是：无需显式设置
max-height或flex-basis，也无需 JavaScript 计算——纯 CSS 即可保障任一区域在视觉上不会长期占据超过 50% 的可视区域（因溢出后用户需滚动查看，实际可见部分受容器限制）。
以下是推荐的实现代码：
.container {
display: grid;
height: 300px; /* 固定容器高度，作为布局基准 */
}
.topDiv,
.bottomDiv {
overflow: auto; /* 关键：启用滚动，避免内容溢出破坏布局 */
}
.topDiv {
background-color: blue;
color: white;
}
.bottomDiv {
background-color: green;
color: white;
}
<div class="container">
<div class="topDiv">
<p>少量内容：仅一段文字...</p>
</div>
<div class="bottomDiv">
<p>大量内容：多段长文本……</p>
<p>……持续填充至超出容器高度</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<!-- 滚动条将自动出现在该区域 -->
</div>
</div>
✅ 优势总结：
- ✅ 零配置自适应：无需
flex: 1、min-height、max-height或grid-template-rows； - ✅ 滚动安全：每个区域独立滚动，互不干扰，内容超限时不会挤压对方；
- ✅ 语义清晰：Grid 天然表达“两个顺序排列的区块”，比 Flexbox 更贴合垂直分栏语义；
- ✅ 兼容性好：现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）全面支持。
⚠️ 注意事项：
- 避免为
.topDiv或.bottomDiv设置height: 100%或flex相关属性，这会覆盖 Grid 的内在尺寸逻辑； - 若需严格限制单个区域最大高度为
50%（例如禁止其初始渲染高度超过 150px），可补充max-height: 50%，但通常非必需——因为overflow: auto已确保内容可控； - 不建议回退使用 Flexbox 并配合
flex-basis: 0+flex-grow: 1等组合，实测易导致高度计算冲突，且难以稳定约束 50% 上限。
综上，CSS Grid 不仅是现代布局的首选方案，更是解决“内容感知型垂直分配”问题的优雅答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
