加min-width:0可解除Flex子项默认min-width:auto限制，使flex-shrink生效；需配合flex:1、overflow:hidden、white-space:nowrap及text-overflow:ellipsis，并作用于直接子元素。
移动端 Flex 子元素超出容器，不是 Flex 本身有问题，而是默认行为在小屏幕下被放大——min-width: auto 遇上长单词、URL 或未约束图片，立刻撑破父容器，且浏览器不会报错，只会默默溢出。
为什么 flex-shrink: 1 在手机上完全不生效
你写了 flex: 1 或显式 flex-shrink: 1，但子项依然把父容器顶开、横向滚动条出现、布局错位。这不是 bug，是规范强制行为：min-width: auto 在移动端更敏感，尤其遇到以下内容：
- 连续无空格字符串（如
https://example.com/very-long-path-with-no-dash-or-space） -
<img>没设max-width: 100%，原始尺寸远超容器 - 第三方组件（如 Ant Design 的
Card）内部未重置min-width
关键点：只要没显式写 min-width: 0，flex-shrink 就被锁死，浏览器宁可溢出也不压缩内容宽度。
min-width: 0 加在哪一层才真正起作用
它必须加在「直接参与弹性分配」的子元素上，而不是嵌套容器里：
立即学习“前端免费学习笔记（深入）”；
- 水平布局（
flex-direction: row）→ 给子项加min-width: 0 - 垂直布局（
flex-direction: column）→ 改用min-height: 0 - 如果子项内部还有 Flex 容器（比如
.item > .inner-flex），.inner-flex也要单独加min-width: 0 - 别依赖全局重置——某些 UI 库会覆盖它，DevTools 的 Computed 面板里确认值是
0才算生效
移动端特有的坑：width: 100vw + padding = 必然溢出
很多响应式写法喜欢用 width: 100vw 做全屏容器，但它和 padding 组合时，在 iOS Safari 和部分安卓 WebView 中会直接超限：
-
100vw是视口宽度，不含滚动条宽度；但 padding 是额外加上的 - 加上
box-sizing: border-box也救不了——因为100vw本身已占满，再加 padding 必然溢出 - 正确做法：
width: 100%+ 父容器有明确 content width（比如max-width: 100%或外层padding已由 body 控制） - 顺手检查
html和body是否有意外margin或padding，它们在移动端常被忽略
overflow-x: auto 在手机上没滚动条？先看这三件事
加了 overflow-x: auto 却不能横向拖拽，常见于 iOS Safari 和 Chrome Android：
- 父容器缺显式宽度约束：
width或max-width必须存在，100%不够，得是具体值或带单位的百分比（如max-width: 100%在某些嵌套下无效） - 子项没设
flex-shrink: 0或flex: 0 0 auto—— Flex 默认会压缩，压缩后没内容溢出，滚动条自然不出现 - iOS Safari 默认禁用手动拖拽横向滚动，必须加：
-webkit-overflow-scrolling: touch或overscroll-behavior-x: contain
最常漏掉的是：把 overflow-x: auto 错加在子项上，它必须作用于 Flex 容器本身。
