flex-shrink: 0对图片无效是因为它只跳过收缩计算却不定义尺寸起点，必须配合flex: 0 0 auto、width: auto、height: auto和min-width: 0才能确保图片保持固有尺寸与宽高比；长文本容器则需在目标元素上设min-width: 0并移除flex-shrink: 0，否则换行逻辑被锁定。
直接设 flex-shrink: 0 不一定管用，关键得看你要保的是什么：固定尺寸元素（如图片、图标）和文本容器的解法完全不同，混用或漏掉前提条件，压缩照样发生。
flex-shrink: 0 为什么对图片没效果？
它只跳过收缩计算，不定义尺寸起点。图片作为替换元素，flex-basis 默认 fallback 到 0 或 100%，结果要么塌成一条线，要么被拉伸变形。
- 必须配
flex: 0 0 auto（等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto） - 再补上
width: auto; height: auto，防框架重置样式覆盖flex-basis: auto - 加上
min-width: 0—— 否则外层 Flex 容器塌缩时，挤压会传导进来 - 最后加
max-width: 100%和height: auto，防止撑破或纵向坍缩
长文本容器为什么写了 overflow-wrap 还是撑破？
因为 Flex 子项默认 min-width: auto，浏览器优先保全文本完整显示，压根不给换行留空间。你看到的“撑破”，其实是换行逻辑被锁死了。
- 必须在目标文本元素上加
min-width: 0（不是父容器） - 父容器得有
width或max-width，否则没有“可用空间”概念 - 删掉可能存在的
flex-shrink: 0，它会让文本彻底拒绝压缩 - 对无空格长串（如 URL、哈希），需叠加
overflow-wrap: break-word，但前提是前面三点已满足
哪些地方最容易漏掉 min-width: 0？
min-width: 0 只对 Flex 容器的**直接子元素**生效。嵌套一层 <div> 就断链；旧版 Safari 对 <code>flex: 1 隐含的 min-width: 0 支持也不稳。
立即学习“前端免费学习笔记（深入）”；
- 卡片里写
<div class="content"><p>长文本</p></div>→min-width: 0必须加在.content上，不是p - 侧边栏是
display: flex，里面又有个头像 + 文字块 → 文字块也得单独加min-width: 0 - Safari ≤15.6 下，
flex: 1可能不推导出min-width: 0，必须显式写 -
flex-direction: column时，min-width: 0不影响垂直方向，但文本截断仍发生在水平轴，所以目标子项自己得设max-width
真正难的不是加哪一行 CSS，而是判断这个元素在所有断点下是否真的“不能小”——图片要保比例，文本要保可读，而 min-width: 0 和 flex-shrink: 0 是两个完全不同的约束层级，混用或漏写，问题只会从一个方向转移到另一个方向。
