flex-shrink: 0对图片无效是因为它只跳过收缩计算却不定义尺寸起点，必须配合flex: 0 0 auto、width: auto、height: auto和min-width: 0才能确保图片保持固有尺寸与宽高比。
直接给子项加 flex-shrink: 0 或 min-width: 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？
它只对 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 是两个完全不同的约束层级，混用或漏写，问题只会从一个方向转移到另一个方向。
