必须加min-width: 0，否则所有截断、收缩、flex: 1都白搭——这是浏览器默认行为，不是你写错了；flex子项默认min-width: auto锁定最小宽度不小于内容，需显式设min-width: 0解除锁定，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束才生效。
必须加 min-width: 0，否则所有截断、收缩、flex: 1 都白搭——这是浏览器默认行为，不是你写错了。
为什么min-width: 0非加不可
Flex 子项默认 min-width: auto，浏览器会按最长不可折行内容（比如 https://example.com/very-long-path 或连续无空格英文）锁定最小宽度。哪怕父容器只有 200px，它也拒绝缩得比 URL 更窄。这个限制只检查子项自身的 computed min-width 值，不继承、不传递、不靠父级设置覆盖。
DevTools 的 Computed 面板里如果看到 min-width: auto 还在，问题根源就在这儿。
-
min-width: 0px或min-width: 0%在旧版 Safari 中可能不生效，只用无单位的min-width: 0 - 加在父容器（如
.container）上完全无效，必须加在直接含文本的子元素上，例如.item > span或.title - 嵌套 Flex 场景下，内层需收缩的文本元素（如
.info > p）也得单独加，不会继承
min-width: 0 单独加了还是溢出？缺这三样
min-width: 0 只是“解锁”收缩能力，不是自动裁剪。要真正显示省略号或隐藏溢出，必须和以下三个样式同级作用于同一元素：
-
white-space: nowrap：必须写在目标文本元素上，不能写父容器；否则文字提前换行，根本没机会单行溢出 -
overflow: hidden：只对块级元素生效；若目标是span，得先加display: block或inline-block -
text-overflow: ellipsis：纯装饰层，不参与布局计算，缺了前面任意一条，它就不画点
四者（含 display: block）必须共存于同一个元素上，且该元素得有明确宽度约束（来自父容器的 max-width 或自身 flex-basis）。
父容器没设宽度，overflow: hidden 就是摆设
Flex 容器默认 width: auto，会随子项无限撑开。你给子项加 overflow: hidden，裁剪的是子项内部，但整个容器已变宽，横向滚动条依然存在。
- 必须给发生溢出的 Flex 容器本身设
max-width（如max-w-96）或width（如w-full） - 若容器在 Grid 或绝对定位上下文中，确认其块级尺寸是否已被父级约束；否则
overflow不起效 - 别把
overflow-x-hidden加在最外层 wrapper 上——得加在实际发生溢出的那层 Flex 容器上 -
flex-wrap: nowrap（默认值）是溢出前提；改成wrap能绕过，但语义已变，慎用
图片、iframe 和 padding/margin 的隐形坑
min-width: 0 对替换元素（如 <img>、<iframe></iframe>）无效，它们自带更顽固的固有尺寸。
-
<img>必须额外加max-w-full和h-auto（Tailwind）或max-width: 100%+height: auto（原生 CSS） - 子项设了
padding却没加box-sizing: border-box，弹性分配宽度之外还会多出内边距，悄悄撑破容器 - 用
margin分隔子项时，优先改用容器级gap；必须用margin的话，要么加负margin抵消，要么用calc()微调（如width: calc(33.333% - 8px)） - 移动端 Safari 可能误读
min-w-fit或min-w-[-webkit-fit-content]，覆盖掉min-w-0，务必在 DevTools 里确认最终 computed 值
最常被忽略的其实是层级和定位：子元素用了 absolute 或 transform，overflow 就对它失效——得在它的最近 relative 父容器上加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
