加了flex-wrap:nowrap和overflow-x:auto仍不滚动，是因为图片默认flex-shrink:1被压缩致未溢出；必须给每张图片设flex-shrink:0、父容器设明确width/max-width，且避免overflow: auto误触垂直滚动。

为什么加了 flex-wrap: nowrap 和 overflow-x: auto 图片还是不滚动

不是 CSS 写错了，而是滚动根本没触发——因为图片默认会压缩（flex-shrink: 1），哪怕容器宽度固定，子项也被“压扁”到不溢出。浏览器一看：内容没超宽，滚动条自然不出现。

• 必须给每个 <img> 加 flex-shrink: 0，不能只写在父容器上（该属性对非 flex 项目无效）
• 父容器必须有明确的 width 或 max-width，比如 width: 100% 或 max-width: 400px；仅靠 display: flex 不会自动限宽
• overflow-x: auto 不能省略为 overflow: auto，某些 Safari 版本会误启垂直滚动，干扰横向行为

图片直接用 <img> 还是包一层 <div> <p>推荐直接用 <code><img>，更轻量，但有两个硬性补丁：

吐槽大师

一款以 AI 为核心的趣味文案生成工具，主打根据人物或内容生成轻松幽默的吐槽文本，适合社交媒体互动和娱乐表达。

下载

• <img> 默认是 inline 元素，底部会多出空白（基线对齐导致），加 vertical-align: top 或 display: block 消除
• 必须加 flex-shrink: 0，否则窄屏下小图会被压成一条线；别信 width: 100% ——它会让图片绑定父容器宽，失去原始尺寸
• 如果图片尺寸差异大，可加 min-width: max-content 防止过窄，但注意老浏览器兼容性（max-content 在 iOS 14.5 以下不支持）

iOS Safari 上手指一滑页面就上下回弹，怎么 fix

这是浏览器默认允许纵向滚动导致的冲突，不是 bug，是行为策略。

• 给父容器加 touch-action: pan-x，明确告诉浏览器“只响应横向拖拽”
• 旧版 Safari（≤15.6）必须加 -webkit-overflow-scrolling: touch，否则惯性滚动失效、拖不动
• 检查祖先元素有没有 touch-action: none 或 pointer-events: none，它们会拦截原生滚动事件
• 避免在滚动区域里用 transform 或 filter，这些会触发合成层，干扰滚动线程（尤其 iOS）

滚动条太丑又想隐藏，但隐藏后滚不动了

直接 display: none 在 Safari 下会禁用滚动能力，必须用透明化伪元素替代。

• WebKit 浏览器用：::-webkit-scrollbar { width: 0; } + ::-webkit-scrollbar-thumb { background: transparent; }
• Firefox 用：scrollbar-width: none;
• 千万别删掉 overflow-x: auto 或改 overflow: hidden ——那是功能前提，样式只是表皮
• 如果用了 scroll-behavior: smooth，注意它在部分安卓 WebView 中不生效，别依赖它做核心交互

滚动最难的部分不在“让它动”，而在“让它稳”：flex-shrink: 0 漏一个子项、touch-action 少一层、width 约束没落在正确层级——任意一个断点，都会让整行卡住或换行。调试时优先用开发者工具检查盒模型尺寸，而不是猜样式顺序。