如何强制CSS Grid容器固定高度并实现溢出滚动？

嘿，我之前正好碰到过一模一样的问题！你之前的问题出在只给容器加了max-height，但Grid的行默认是auto，会跟着内容无限撑开，导致容器的高度限制失效。下面给你两个实用的解决方案：

方案一：用1fr限制滚动区域高度，底部自适应 #

这个方案最适合你的场景——顶部区域内容溢出滚动，底部区域高度不确定但完全显示。

核心思路是：给Grid容器设置grid-template-rows: 1fr auto，让顶部行占据容器除了底部之外的所有可用空间，再给顶部元素加滚动属性。

代码示例：

.grid-container {
  display: grid;
  grid-template-rows: 1fr auto; /* 1fr分配剩余空间，auto自适应底部高度 */
  max-height: 400px; /* 你需要的容器最大高度 */
  overflow: hidden; /* 防止容器本身出现滚动条，把滚动限制在内部元素 */
  border: 1px solid #ddd; /* 方便观察容器边界，可删除 */
}

.top {
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  padding: 1rem;
}

.bottom {
  padding: 1rem;
  background-color: #f5f5f5;
}

对应的HTML结构：

<div class="grid-container">
  <div class="top">
    <!-- 这里放任意多的文本内容 -->
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...（省略大量重复文本）
  </div>
  <div class="bottom">
    我是高度不确定的底部区域，内容多少都能完整显示
  </div>
</div>

方案二：给滚动区域设置最小高度（可选） #

如果希望顶部区域即使内容很少，也保持一个最小高度，可以用minmax()来替代1fr：

.grid-container {
  grid-template-rows: minmax(200px, 1fr) auto; /* 顶部至少200px，最多占满剩余空间 */
}

为什么之前的设置失效？ #

之前你只给容器加了max-height，但Grid的auto行会自动拉伸以容纳所有内容，相当于直接忽略了容器的高度限制。用1fr就把顶部行的高度牢牢限制在容器的可用空间内，超出的内容自然就会触发滚动条啦。

内容的提问来源于stack exchange，提问作者Post Self