Horizontal scrollbar无法滚动：横向卡片滚动器故障求助

问题出在网格列宽设置和卡片固定宽度冲突，导致卡片总宽度没超出容器，自然没法横向滚动。

问题拆解 #

你给 .media-scroller 设了 grid-auto-columns: 45%，想让每列占容器45%宽度，但又给 .card 固定了 width: 120px——这俩设置打架，网格列的实际宽度被卡片的固定值限制，根本达不到45%的占比。三个卡片加起来总宽度没超过容器，滚动条虽然显示，但没东西可滚。

两种解决办法 #

根据你的需求选一个就行：

办法一：保留网格百分比布局（推荐）

删掉 .card 的固定宽度，让网格列的45%生效，三个卡片总宽度135%，超出容器后就能滚动：

.media-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 45%;
  overscroll-behavior-inline: contain;
  overflow-x: auto;
  /* 可选：加内边距让卡片不贴容器边缘 */
  padding-inline: 1rem;
  gap: 1rem; /* 用gap代替margin-left，布局更规整 */
}

.card img {
  width: 90px;
  height: 90px;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 删掉width:120px */
  border: none;
  margin-top: 15%;
  /* 删掉margin-left:5%，用gap控制间距 */
}

.mid {
  margin-top: 25%;
}

.list-group-item {
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: var(--font-medium);
  color: var(--main-color);
  border: none;
}

.card-title {
  font-family: var(--body-font);
  font-size: 22px;
  font-weight: var(--font-medium);
  color: var(--main-color);
}

办法二：保留卡片固定宽度

要是必须维持卡片120px的宽度，就把 grid-auto-columns 改成 auto，让列宽跟着卡片走，同时保证总宽度超出容器：

.media-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto; /* 列宽自适应卡片 */
  overscroll-behavior-inline: contain;
  overflow-x: auto;
  padding-inline: 1rem;
  gap: 1rem;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px; /* 保留固定宽度 */
  border: none;
  margin-top: 15%;
}

/* 其他样式不变 */

额外小技巧 #

• 用 gap 代替 margin-left 控制卡片间距，比margin更适配网格布局，不会出现奇怪的偏移。
• 可以给 .media-scroller 加 scrollbar-width: thin;（火狐）或者 -webkit-scrollbar 相关样式，让滚动条更美观。

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