min-width: 0 是解决 flex 子项溢出的核心手段，因其覆盖默认 min-width: auto，允许子项压缩；但必须加在需收缩的直系 flex 项目上，并配合 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis 才能实现文本截断。
min-width: 0 是解决移动端 Flex 内容溢出最直接有效的手段，但它不是万能开关——必须加在正确的元素上，且常需配合 overflow 和 white-space 才能真正生效。
为什么 flex 项不收缩？因为默认 min-width: auto
Flex 子项默认 min-width: auto，意思是“再挤也不能比内容本身窄”。一段长 URL 或连续英文单词，浏览器会把它当做一个不可分割的整体，导致父容器无法压缩，最终横向溢出或撑破布局。这不是 bug，是规范行为。
-
min-width: 0显式覆盖该默认值，允许子项压缩到 0（实际受内容最小可渲染宽度限制） - 只加在需要收缩的直系 flex 项目上，比如
.info、.content，而不是整个.wrapper - 若子项内部还有 flex 容器（如头像 + 文字块），内层也要加
min-width: 0，否则溢出会“穿透”进来
加了 min-width: 0 还是没截断？检查三件套是否齐备
仅靠 min-width: 0 不会让文字自动变省略号。它只是“解锁”了收缩能力，后续截断逻辑仍需手动激活：
- 必须设
white-space: nowrap（单行）或overflow-wrap: break-word（多行换行） - 必须设
overflow: hidden，否则溢出内容仍可见 - 必须设
text-overflow: ellipsis（仅对nowrap有效） - 容器需为块级且有明确宽度上下文（
min-width: 0在 flex 中就提供了这个上下文）
移动端滚动区域里 flex 溢出怎么办？别只盯 flex-wrap
用 display: flex 做水平滚动时，常见错误是以为加了 flex-wrap: nowrap 就够了——其实它只禁折行，不解决子项撑宽问题。
- 父容器必须设
overflow-x: auto和明确宽度（如width: 100%） - 每个子项推荐用
flex: 0 0 auto（不放大、不缩小、按内容宽） +min-width: 0 - iOS Safari 卡顿？加
-webkit-overflow-scrolling: touch，但注意它可能让position: fixed子元素错位 - 左右边缘文字被切？确认滚动容器用了
box-sizing: border-box，避免 padding 算进 width
容易被忽略的嵌套和响应式陷阱
复杂卡片或表单项中，溢出往往发生在多层嵌套 flex 的“缝隙”里，而小屏下固定 min-width 又会破坏适配。
- 逐层检查：从外层
.card→ 中间.row→ 内部.title，只要参与 flex 分配，就可能需要min-width: 0 - 慎用
min-width: 200px这类固定值，小屏下反而撑开；优先用min-width: 0+ 媒体查询微调 - 不要在 flex 项上同时写
width: 100%和flex: 1，两者冲突，width可能被忽略 - 图片/图标容器记得加
flex-shrink: 0，防止被压扁变形
真正麻烦的从来不是加一行 min-width: 0，而是得判断它该加在哪一层、配合哪些其他样式、以及在不同设备尺寸下是否依然合理。漏掉任意一环，溢出就会换个方式回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
