本文介绍如何利用 css grid 的天然流式特性，让上下两个区域根据内容多少自动分配高度，同时限制单个区域最大不超过容器高度的 50%，无需 javascript 即可实现灵活、响应式的垂直空间分配。
本文介绍如何利用 css grid 的天然流式特性，让上下两个区域根据内容多少自动分配高度，同时限制单个区域最大不超过容器高度的 50%，无需 javascript 即可实现灵活、响应式的垂直空间分配。
在构建双区域垂直布局（如编辑器+预览区、标题区+内容区）时，常见的需求是：内容少的区域应自然收缩，把空间让给内容多的区域；但任一区域都不能无限扩张——尤其当双方内容都很多时，需公平约束上限（如各 ≤50% 容器高度）。使用 Flexbox 的 flex: 1 虽能均分空间，却无法实现“按需伸缩 + 有界限制”的组合行为；而 CSS Grid 则天然支持这一模式。
✅ 正确解法：CSS Grid + overflow: auto
只需将容器设为 display: grid，并省略显式行高定义（即不写 grid-template-rows），Grid 就会进入“自动行轨道”模式：
- 每个子元素默认按内容高度撑开（
auto行高）； - 当内容超出容器时，
overflow: auto触发滚动； -
最关键的是：Grid 会自动在两者间公平分配剩余空间，并隐式施加“单个区域不超过 50%”的软性上限——因为当一方内容增长，另一方若已无足够内容撑开，其高度将保持最小内容高度，剩余空间自然归于前者；而当双方内容均溢出时，Grid 会将可用高度大致均分（等效于
minmax(0, 1fr)行行为），从而自然满足 ≤50% 的约束。
以下是精简可靠的实现代码：
.container {
display: grid;
height: 300px; /* 固定容器高度 */
gap: 0; /* 可选：控制间距 */
}
.topDiv,
.bottomDiv {
overflow: auto; /* 内容溢出时启用滚动，避免撑破容器 */
}
.topDiv {
background-color: #1e88e5;
color: white;
}
.bottomDiv {
background-color: #43a047;
color: white;
}
<div class="container">
<div class="topDiv">
<p>少量内容：仅一段文字。</p>
</div>
<div class="bottomDiv">
<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>
<p>……持续填充至溢出。</p>
<p>……此时顶部收缩，底部获得大部分可视空间，且自身可滚动。</p>
</div>
</div>
⚠️ 注意事项与最佳实践
-
不要设置
grid-template-rows：显式定义如grid-template-rows: 1fr 1fr会退化为 Flexbox 类似均分行为，失去内容驱动优势；保持未定义状态才能激活 Grid 的自动尺寸计算逻辑。 -
overflow: auto是必需的：它既是滚动触发器，也是 Grid 高度计算的“锚点”——Grid 会优先保障内容可读性（通过滚动），而非强制拉伸。 -
兼容性友好：CSS Grid Level 1（
display: grid）已获所有现代浏览器及 IE11+ 全面支持，生产环境可放心使用。 -
进阶控制（可选）：若需更精细的弹性比例（如最小高度、最大高度限制），可升级为
grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr)，但对本场景而言，基础写法已足够鲁棒。
综上，CSS Grid 不仅语义清晰、代码简洁，更以声明式方式优雅解决了“内容感知 + 空间守恒”的双重需求。相比 Flexbox 的复杂 hack 或 JS 动态计算，它是现代布局中更推荐的标准方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
