根本原因是父容器未设flex-wrap: nowrap或white-space: nowrap，导致内容超宽时优先折行而非滚动，使flex-shrink:0失效；需配合overflow-x: auto、min-width: 0及ios专属-webkit-overflow-scrolling: touch等设置。
为什么flex-shrink:0加了还是被压缩？
根本原因不是没加，而是父容器没设white-space: nowrap或没关掉flex-wrap——Flex默认允许换行，一旦内容超宽，浏览器可能优先折行而非滚动，导致flex-shrink:0失效。
实操建议：
- 外层容器必须同时设：
display: flex+flex-wrap: nowrap+overflow-x: auto - 内层每个推荐项加
flex-shrink: 0，并显式设min-width: 0（防文本撑破） - 在iOS Safari上，还得补
-webkit-overflow-scrolling: touch，否则滑动卡顿或不跟手
横向滚动在iOS上不跟手、回弹异常怎么办？
这是WebKit老问题：纯overflow-x: auto在iOS上默认禁用惯性滚动，手指一抬就停，体验像“拖木头”。
实操建议：
- 外层容器加
-webkit-overflow-scrolling: touch（仅iOS需，Android和新版Chrome已默认支持） - 避免在外层用
transform或will-change，它们会干扰滚动层合成，导致卡顿 - 如果用了
position: sticky或backdrop-filter，先关掉测试——这两者在滚动容器里极易引发重绘抖动
手指滑动时推荐位错位、闪跳怎么定位？
常见于动态插入新项或React/Vue重渲染后，DOM结构微变触发Flex重新计算，而scrollLeft没同步保持。
实操建议：
- 不要靠
width控制单个推荐项宽度，改用flex-basis（如flex-basis: 120px），它和flex-shrink:0配合更稳 - JS手动滚动时，优先用
element.scrollTo({ left: x, behavior: 'smooth' })，别直接改scrollLeft（Safari对后者有延迟更新） - 检查是否有外部CSS重置了
box-sizing，导致padding/border被算进flex项尺寸，引发布局偏移
要不要用scroll-snap-type做吸附？
能做，但得看场景：如果推荐位是等宽卡片、用户需要精准停靠，开它是加分项；但如果卡片宽度不一，或要支持快速滑过多个项，它反而会打断操作流。
实操建议：
- 开的话，外层设
scroll-snap-type: x mandatory，每个内层项加scroll-snap-align: start - 务必加
scroll-behavior: smooth，否则吸附过程生硬 - 注意兼容性：
scroll-snap-type在iOS 14+、Chrome 69+才稳定，旧版本会直接退化为普通滚动，不报错也不提示
img没设height，导致滚动区域高度塌陷，整个横向滚动区被压成一条线——这时候再调flex-shrink也没用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
