flex容器需设min-width: 0，但根本原因常是父容器未约束宽度或外部元素（如img、pre）撑宽；chrome 115+甚至将绝对定位子元素纳入溢出判定；正确处理需html{overflow-x:hidden}、scrollbar-gutter:stable等。
flex容器里加了min-width: 0还不够？检查父级是否撑宽
flex项不收缩、内容溢出、横向滚动条闪现，根本原因常不在flex本身，而是父容器没约束宽度，或外部元素（比如img、pre、未设max-width的卡片）偷偷把整个flex上下文撑宽了。Chrome 115+甚至会把绝对定位子元素的边界纳入flex容器溢出判定——哪怕它已脱离文档流。
实操建议：
- 先给flex容器加
min-width: 0（必须，不是可选） - 再检查它的直接父元素：是否设了
width: 100vw？这个值在有滚动条时 = 视口宽 + 滚动条宽，必然超限 - 用DevTools的「盒模型高亮」悬停
html，看实际宽度是否 >100%；如果是，说明有元素横向溢出 - 临时给body加
outline: 1px solid red，快速识别哪一层真正越界
为什么overflow-x: hidden加在body上无效
移动端和现代桌面浏览器的根滚动容器是html，不是body。给body设overflow-x: hidden对横向滚动无约束力，iOS Safari下还可能干扰弹性滚动。
正确做法是：
-
html { overflow-x: hidden; }——唯一真正生效的位置 - 如果项目用了Normalize.css等重置库，检查它是否覆盖了
html的overflow值 - 避免同时给
html和body都设overflow，某些安卓WebView会解析冲突
滚动条占位引发的抖动：别硬藏，要稳住空间
flex布局抖动常发生在页面高度临界点：刚够触发滚动条时，body可用宽度突减17px（Windows）或16px（Firefox），所有width: 100%的flex项集体左移。
解决思路不是隐藏滚动条，而是让占位恒定：
- 兼容性最广的方案：
html { overflow-y: scroll; }——强制滚动条常驻，无跳动，但滚动条始终可见 - 现代推荐方案：
html { scrollbar-gutter: stable; overflow-y: auto; }——预留空间却不显示滚动条，Chrome 94+/Firefox 97+/Safari 16.4+ 支持 - 降级兜底必须写在同一条CSS规则里，不能只靠
@supports包裹，否则不支持时完全失效
flex子项含长文本或替换元素时的细节陷阱
图片、iframe、input[type="number"]（iOS上自带微调按钮）、未折行URL，都是flex布局中典型的“宽度刺客”。它们默认不响应flex-shrink，也不受min-width: 0直接影响。
必须单独处理：
- 所有
img、video、iframe加max-width: 100%; height: auto; - 文本容器加
overflow-wrap: break-word;（比word-break: break-word更安全） - iOS上
input[type="number"]需额外重置：padding-right: 0; padding-left: 0; - 避免在flex子项上误用
flex-shrink: 0，除非你确认它不该压缩
真正难处理的不是flex规则本身，而是滚动条占位与视口单位、替换元素、绝对定位之间的隐式耦合。一旦出现抖动，优先查html宽度、100vw使用点、以及是否有未约束的图片或输入框——这些地方比flex声明更容易埋雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
