移动端HTML/CSS实现内容横向滚动问题求助

你的问题核心在于当前的Flex配置让子元素在移动端会自动挤压收缩，没法形成横向滚动的条件。之前尝试的overflow: scroll没生效，是因为Flex的子元素属性没调整到位，导致内容没有超出容器宽度的触发条件。

试试修改你的CSS代码，调整Flex容器和子元素的属性：

.images {
  display: flex;
  align-items: center;
  background-color: #eee;
  padding: 1rem;
  /* 开启横向滚动，内容超出时显示滚动条 */
  overflow-x: auto;
  /* 强制子元素不换行，保持在一行 */
  flex-wrap: nowrap;
  /* 可选：隐藏浏览器默认滚动条（按需添加） */
  /* scrollbar-width: none; */
}

.images > div {
  /* 关键：禁止子元素放大/缩小，保持自身宽度 */
  flex: 0 0 auto;
  /* 给每个图片容器设置固定宽度，根据需求调整 */
  width: 280px;
  padding-left: 15px;
  padding-right: 15px;
}

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

关键调整说明： #

• overflow-x: auto：给容器添加横向滚动能力，当子元素总宽度超过容器宽度时，自动出现滚动条
• flex-wrap: nowrap：确保所有子元素强制排在一行，不会因为容器宽度不够而换行
• flex: 0 0 auto：这是解决问题的核心——原来的flex-grow: 1会让子元素自动拉伸填满容器，改成这个属性后，子元素会保持你设置的固定宽度，不会被挤压或拉伸，这样当多个子元素总宽度超过容器时，就能触发横向滚动了
• 给子元素设置固定宽度：你可以根据设计需求调整width的数值，比如250px、300px都可以

如果想优化滚动条样式，比如隐藏默认滚动条，可以额外添加：

/* Chrome/Safari 隐藏滚动条 */
.images::-webkit-scrollbar {
  display: none;
}
/* Firefox 隐藏滚动条 */
.images {
  scrollbar-width: none;
}

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