必须在flex容器的直接子元素上加min-w-0（即min-width: 0），才能覆盖默认min-width: auto，否则flex-1、truncate、break-words等均失效，因收缩与截断前提未建立。
根本不是 Tailwind 的 class 写错了，而是 flex 容器的直接子元素默认带 min-width: auto，浏览器会优先保障长 URL、token 或连续英文完整显示，直接撑开整个布局——flex-1、truncate、break-words 全部失效，因为换行和截断逻辑根本没触发。
为什么加了 flex-1 还是撑破容器
因为 flex-1 等价于 flex: 1 1 0%，它只管空间分配，不改 min-width。而 Flex 子项默认的 min-width: auto（≈ min-content）会让一串 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 强行占满 800px 宽度，哪怕父容器只有 320px。
-
flex-1不等于“可压缩”，它默认仍受min-width: auto锁死 - 旧版 Safari（≤15.6）甚至不认
flex: 1 1 0隐含的收缩意图，必须显式写min-w-0 - 如果子项同时写了
shrink-0，min-w-0也救不了——先检查并删掉它
为什么 truncate 和 break-words 没反应
这两个工具类只是“溢出控制规则”，不是“收缩开关”。它们只在内容**超出可用空间后**才生效；而 min-width: auto 已经把容器撑大，根本没有“超出”的前提。
-
truncate=white-space: nowrap+overflow: hidden+text-overflow: ellipsis，但前提是盒子本身得有宽度边界 -
break-words=overflow-wrap: break-word，但它需要配合min-w-0和max-w-full才能真正落地 - 移动端要双写：
word-wrap: break-word（兼容 iOS 11 及更早） +overflow-wrap: break-word
为什么嵌套 flex-col 后文字还是溢出
竖排布局下，min-w-0 解决的是主轴（Y 轴）收缩问题，但文本换行发生在行内轴（X 轴），所以仅设 min-w-0 不够。
- 目标子元素必须自己加
max-w-full（或具体值如max-w-[375px]），否则它会按内容无限延展 - 如果子项内部又用了
flex（比如头像 + 文字块），那内层容器也得单独加min-w-0 - 父容器若没设高度锚点（如
h-screen、h-full或min-h-0），flex-col下的flex-1会退化为height: auto，照样撑破
真正难的从来不是加一行 min-w-0，而是每次溢出都要确认：它是否真作用在 flex 容器的**直接子元素**上、有没有被 width: 100% 或 shrink-0 覆盖、父容器是否具备明确的宽高约束、以及文本控制是否凑齐了三件套——漏一个，就白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
