如何移除/自定义div滚动条（不使用overflow:auto）且避免卡片变形？

问题分析 #

你的横向品牌画廊出现多余水平滚动条，是因为.cards-container设置width:auto时，容器会被内部卡片的总宽度撑开，超出父容器宽度就触发默认滚动条。直接加overflow-x:auto后卡片变形，核心是没给容器设置固定宽度约束，且没禁用flex换行，导致卡片被挤压。

修复步骤（两种可选方案） #

方案1：隐藏滚动条但保留滑动功能 #

适合不需要显示滚动条，仅需鼠标/触摸滑动的场景。

修改.cards-container和.card的CSS：

.cards-container {
  display: flex;
  width: 100%; /* 约束容器宽度为父容器宽度 */
  height: auto;
  margin-top: 2cm;
  padding: 0.5cm;
  box-sizing: border-box; /* 让padding包含在width内，避免容器宽度超出 */
  overflow-x: auto; /* 开启横向滚动 */
  overflow-y: hidden; /* 禁用纵向滚动 */
  flex-wrap: nowrap; /* 强制卡片不换行 */
  gap: 1.2rem; /* 用gap代替card的margin-right，避免最后一个卡片的margin导致多余滚动空间 */
  scrollbar-width: none; /* Firefox隐藏滚动条 */
}

/* Chrome/Safari隐藏滚动条 */
.cards-container::-webkit-scrollbar {
  display: none;
}

.card {
  width: 4.7cm;
  height: 4.7cm;
  /* 删掉原有的margin-right:1.2rem */
  border-width: 0px;
  border-color: transparent;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.3);
  flex-shrink: 0; /* 关键：禁止卡片被压缩变形 */
}

方案2：自定义滚动条样式 #

如果需要保留滚动条并美化它，替换方案1里的滚动条隐藏代码为自定义样式：

/* Chrome/Safari自定义滚动条 */
.cards-container::-webkit-scrollbar {
  height: 6px; /* 滚动条高度 */
}

.cards-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 3px;
}

.cards-container::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 3px;
}

.cards-container::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬停时滑块颜色 */
}

/* Firefox自定义滚动条 */
.cards-container {
  scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
  scrollbar-width: thin; /* 滚动条宽度 */
}

关键注意点 #

• flex-shrink: 0：强制卡片保持原尺寸，不会被容器挤压变形
• box-sizing: border-box：避免padding让容器宽度超出父元素，引发不必要的滚动
• gap替代margin-right：消除最后一个卡片的margin导致的多余滚动空间
• flex-wrap: nowrap：确保卡片始终横向排列，不会换行

当前问题效果参考：

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