flex-shrink: 0 是防止子元素被压缩的关键，需配合 flex-grow: 1 和 flex-basis: auto（即 flex: 1 0 auto），再加 white-space: nowrap 与 min-width: 0 防换行和强制撑宽。
flex-shrink 为 0 才能防止内容被压缩
Flexbox 默认会让子元素收缩（flex-shrink: 1），当父容器空间不足时，文字截断、图片缩小、输入框变窄都可能发生。关键不是加 flex-grow，而是先关掉收缩行为。
常见错误是只设 flex: 1 或 flex: auto，这其实等价于 flex: 1 1 auto，第二个 1 就是 flex-shrink: 1 —— 内容照样被压。
- 想让某个子元素「不收缩」：显式写
flex-shrink: 0 - 同时允许它在有富余空间时伸展：补上
flex-grow: 1 - 更稳妥写法：
flex: 1 0 auto（即flex-grow: 1/flex-shrink: 0/flex-basis: auto）
white-space 和 min-width 配合防换行与截断
即使关了 flex-shrink，纯文本或内联元素仍可能因父容器太窄而换行或溢出隐藏。这时要控制内容自身的排版行为。
比如一个标签按钮或路径字符串，你希望它横向完整显示、不折行、不省略：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap阻止换行 -
min-width: 0（对 flex 项目很重要）—— 否则某些浏览器（如旧版 chrome）会忽略flex-shrink: 0，强行按内容宽度撑开 - 如果父容器本身宽度不确定（比如嵌套在另一个 flex 容器里），还要检查祖先是否设置了
min-width: auto或其他限制
示例：
.item { flex: 1 0 auto; white-space: nowrap; min-width: 0; }overflow: hidden 不等于内容被“展示完整”
很多人加了 overflow: hidden 后发现文字还是看不见，误以为是 flex 设置没生效。其实这只是把溢出部分裁掉了，并没解决“为什么内容被挤变形”的根本问题。
真正要问的是：这个子元素的自然宽度是否超过了可用空间？它是否被 flex-shrink 主动压缩？它的内部是否允许换行或缩放？
-
overflow: hidden是兜底策略，不是展示策略 - 若必须单行显示且不允许滚动，优先用
flex-shrink: 0+white-space: nowrap+min-width: 0 - 若允许横向滚动，可加
overflow-x: auto并确保父容器有固定宽高（否则滚动条不会出现）
flex-basis 设为 content 或具体值影响伸缩起点
flex-basis 决定了伸缩前的“初始大小”。设成 auto（默认）会按内容宽度算；设成 0 则完全从零开始按 flex-grow 分配空间 —— 这容易导致小内容被拉得过大，大内容反而被压缩。
例如一个图标 + 文字组合，图标宽 24px，文字平均宽 120px，若设 flex: 1 0 0，两者都会被拉到相同宽度，文字被撑开、图标被放大。
- 想保持内容原有尺寸基础上再伸展：用
flex: 1 0 auto - 想严格按比例分配剩余空间（不管内容多大）：用
flex: 1 0 0，但需配合min-width保底 - 调试时可临时加
border: 1px solid red看实际渲染尺寸，比猜更可靠
父容器是否设置了 width 或 max-width、子元素是否含 img 或 input 这类自带默认尺寸/约束的元素，都会干扰 flex 行为——这些细节比 flex 属性本身更容易让人卡住。