如何让CSS Grid第二行网格项可滚动并自定义滚动条

我帮你搞定这个问题！你遇到的空滚动条问题，核心原因是Grid的auto行高会跟着内容自动撑开，导致目标网格项没有固定的高度限制，所以overflow-y: auto无法触发滚动效果。咱们一步步来解决：

步骤1：给目标网格项添加类名 #

首先给需要滚动的那个网格项（也就是包含多个MENU的div）添加一个专属类名，方便精准设置样式：

<body class="boundary">
  <div class="body_container">
    <div>...</div>
    <div>...</div>
    <!-- 添加scrollable-content类 -->
    <div class="scrollable-content">
      <div>MENU</div>
      <div>MENU</div>
      <div>MENU</div>
      <!-- 更多MENU项 -->
    </div>
    <div>TEST</div>
  </div>
</body>

步骤2：调整Grid容器与滚动项的样式 #

修改.body_container的高度属性，并给滚动项设置高度限制和溢出规则：

html, body { 
  height: 100vh; 
  margin: 0px; 
}

.body_container {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 80px auto;
  /* 把min-height改成height，确保容器高度固定为视口高度 */
  height: 100%;
}

.scrollable-content {
  /* 让滚动项占满Grid行的全部高度 */
  height: 100%;
  /* 垂直方向溢出时显示滚动条 */
  overflow-y: auto;
  /* 可选：去掉默认内边距，避免高度计算偏差 */
  padding: 0;
  margin: 0;
}

步骤3：自定义滚动条样式 #

你可以通过CSS伪元素自定义滚动条的外观，以下是主流浏览器兼容的方案：

/* Chrome、Edge、Safari 自定义滚动条 */
.scrollable-content::-webkit-scrollbar {
  /* 滚动条宽度 */
  width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
  /* 滚动条轨道背景 */
  background: #f1f1f1;
  border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  /* 滚动条滑块样式 */
  background: #888;
  border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  /* 滑块 hover 效果 */
  background: #555;
}

/* Firefox 自定义滚动条 */
.scrollable-content {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

为什么之前的方案无效？ #

当你设置grid-template-rows: 80px auto时，第二行的auto会自动适应内容高度，导致目标网格项的高度和内部内容完全一致，没有“溢出”的情况，所以overflow-y: auto只会显示空滚动条。通过给滚动项设置height: 100%，它会强制继承Grid行的高度（也就是视口高度减去第一行的80px），当内部内容超过这个高度时，就会触发滚动效果。

内容的提问来源于stack exchange，提问作者Ilja KO