CSS Grid单元格加载多元素带滚动条及安卓Chrome布局问题咨询

针对你遇到的两个核心问题，以及单个单元格内多元素滚动的需求，我整理了一套实用的解决方案，专门适配安卓端Chrome的特性：

一、先解决布局溢出的问题 #

你遇到的max-width:100vw导致右侧溢出，本质是安卓Chrome的垂直滚动条会占用视口宽度，而100vw是包含滚动条的完整视口宽度，导致元素实际宽度超出可用显示区域。不设置宽度时被内容撑开，则是因为Grid容器和单元格没有合适的宽度限制。

1. 全局样式重置（关键） #

先给所有元素设置box-sizing: border-box，确保内边距和边框不会额外增加元素宽度，同时清除默认的margin和padding：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 限制页面整体宽度 #

给body设置宽度和禁止水平滚动，避免页面整体溢出：

body {
  width: 100%;
  overflow-x: hidden;
}

3. 正确配置Grid容器 #

放弃max-width:100vw，改用width:100%让容器继承父元素（body）的宽度，同时用grid-template-columns限制列宽，防止被内容撑开：

.grid-container {
  display: grid;
  /* 自动适配列数，每列最小宽度250px，剩余空间平均分配 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem; /* 单元格之间的间距，可按需调整 */
  width: 100%;
  padding: 1rem; /* 给容器加内边距，不会溢出，因为box-sizing已包含 */
}

二、实现单元格内的滚动效果 #

每个wrapper作为Grid的单元格，需要让内部的产品列表在固定范围内滚动，不影响整体Grid布局：

1. 配置wrapper样式 #

给wrapper设置固定高度（或最小高度），开启垂直滚动，同时优化安卓Chrome的触摸滚动体验：

.wrapper {
  /* 固定高度，根据你的设计需求调整 */
  height: 420px;
  /* 允许垂直滚动，内容超出时显示滚动条 */
  overflow-y: auto;
  /* 安卓Chrome触摸滚动优化，让滚动更顺滑 */
  -webkit-overflow-scrolling: touch;
  /* 可选：添加一点内边距，让内容不贴边 */
  padding: 0.8rem;
  /* 可选：给单元格加个边框或背景，区分视觉区域 */
  border: 1px solid #eee;
  border-radius: 8px;
}

2. 优化滚动条样式（可选） #

安卓Chrome默认的滚动条比较突兀，可以自定义样式让它更美观：

/* 自定义垂直滚动条宽度 */
.wrapper::-webkit-scrollbar {
  width: 5px;
}

/* 滚动条滑块样式 */
.wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

/* 滚动条轨道样式 */
.wrapper::-webkit-scrollbar-track {
  background-color: transparent;
}

三、额外注意事项 #

• 加载大量产品数据时，建议用JavaScript做懒加载，避免一次性渲染过多DOM导致安卓Chrome卡顿；
• 如果你的产品内容有图片，记得给图片设置max-width:100%，防止图片撑开wrapper宽度：

.wrapper img {
  max-width: 100%;
  height: auto;
}

内容的提问来源于stack exchange，提问作者b.holz