移动端如何实现元素横向滚动而非自动缩放？

你的卡片被压缩至40px左右，核心原因是Flex布局的子元素默认带有flex-shrink: 1属性——这个属性会让子元素自动缩小来适配容器宽度，直接导致你设置的width:180px失效。

修正步骤： #

1. 给.scrollable-card添加flex-shrink: 0，强制卡片保持设定宽度，禁止被压缩：

.scrollable-card {
  width: 180px;
  height: 210px;
  background: white;
  border-radius: 26px;
  margin: 0 20px;
  resize: none;
  flex-shrink: 0; /* 关键：禁止Flex容器压缩该元素 */
}

注：卡片本身不需要横向滚动，所以可以移除overflow-x: scroll、white-space: nowrap、display: inline-block这些多余属性

2. 调整.card-wrapper的样式，确保滚动行为正常：

.card-wrapper {
  display: flex;
  flex-wrap: nowrap;
  height: 210px;
  overflow-x: auto; /* 无溢出时不显示滚动条，体验更友好 */
  width: 100%; /* 明确占满父容器宽度，触发溢出滚动 */
  margin-top: 10px;
  padding: 0 10px; /* 可选：避免卡片贴边 */
}

修正逻辑： #

• flex-shrink: 0是解决压缩问题的核心，它告诉Flex容器必须保留子元素的原始宽度，不能自动缩小。
• 将.card-wrapper的width:auto改为width:100%，确保容器占满父元素的可用宽度，当内容总宽度超过容器时，才会触发横向滚动。

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