如何使用CSS实现移动端横向滚动区域并隐藏滚动条，解决宽度设置问题

问题原因 #

• 外层flex容器的子元素默认开启了flex-shrink: 1属性，会自动挤压宽度适配容器宽度，导致卡片无法按预期尺寸展示
• 内层卡片元素未设置固定宽度，内部img的width: 100%没有可参照的父元素宽度基准
• 缺少多浏览器兼容的滚动条隐藏样式

修复方案 #

1. 调整HTML结构样式

<!-- 外层横向滚动容器 -->
<div style="overflow-x: auto; display: flex; gap: 12px; padding: 10px;" id="v">
  <!-- 单个卡片项：需设置flex-shrink:0禁止收缩，同时指定固定宽度 -->
  <div style="flex-shrink: 0; width: 120px;">
    <img src="你的图片地址" style="width: 100%; height: 160px; object-fit: cover;" alt="">
    <p>name</p>
  </div>
  <!-- 重复多个卡片项即可实现横向滚动效果 -->
  <div style="flex-shrink: 0; width: 120px;">
    <img src="你的图片地址" style="width: 100%; height: 160px; object-fit: cover;" alt="">
    <p>name</p>
  </div>
  <div style="flex-shrink: 0; width: 120px;">
    <img src="你的图片地址" style="width: 100%; height: 160px; object-fit: cover;" alt="">
    <p>name</p>
  </div>
</div>

2. 新增滚动条隐藏样式

/* 兼容Chrome、Safari等webkit内核浏览器 */
#v::-webkit-scrollbar {
  display: none;
}
/* 兼容火狐浏览器 */
#v {
  scrollbar-width: none;
}
/* 兼容IE、Edge浏览器 */
#v {
  -ms-overflow-style: none;
}

关键改动说明 #

• 卡片项的flex-shrink: 0是核心配置，强制flex容器不挤压卡片宽度
• 卡片项需要指定固定宽度作为内部img的宽度参照，可根据需求自行调整120px的数值
• 图片建议设置固定高度，百分比高度需要父元素有明确高度才能生效，新增object-fit: cover可以避免图片拉伸变形
• 三个滚动条隐藏样式可以覆盖移动端99%以上的浏览器场景，不会影响横向滚动的交互手感

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