flex-shrink: 0没挡住图片被压扁，因为它仅跳过收缩计算，不定义尺寸起点，也不阻止父容器塌缩或嵌套层级传导挤压；必须配合flex: 0 0 auto、width: auto、height: auto和min-width: 0才能确保图片按固有尺寸渲染并保持宽高比。
flex-shrink: 0 为什么没挡住图片被压扁？
因为 flex-shrink: 0 只是跳过收缩计算，不是“锁尺寸”开关。它不定义起点，也不管父容器塌不塌——如果父级 flex 容器自己没宽度、没 min-width: 0，或者图片被包在多层 div 里，flex-shrink: 0 就根本没机会生效。
常见失效组合：
-
img上写了flex-shrink: 0，但父容器是display: block→ 属性被忽略 - 写了
flex-shrink: 0，后面又用flex: 1覆盖 → 实际值变回1 -
img包在<div class="wrapper"><img></div>里，flex-shrink: 0加在.wrapper上，但真正要保形的是img - 父容器用了
max-width: 100%+position: fixed，但没设min-width: 0→ 外层先塌缩，挤压传导到子项
给图片加 flex-shrink: 0 的正确写法
单写 flex-shrink: 0 是半截路子。图片这类替换元素必须三件套齐备，才能稳住 intrinsic size 和宽高比：
-
flex: 0 0 auto—— 等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，明确起点为内容原始尺寸 -
width: auto; height: auto—— 防止框架重置样式或flex-basisfallback 覆盖 -
min-width: 0—— 关键隐藏开关，解除 flex 默认的min-width: auto锁定，让flex-shrink: 0真正起效
补上防撑破和保比例：
-
max-width: 100%—— 防止图片撑出容器 -
height: auto—— 避免 flex 强制设height: 0导致纵向坍缩
完整示例：
img {
flex: 0 0 auto;
width: auto;
height: auto;
min-width: 0;
max-width: 100%;
}
哪些元素必须加 flex-shrink: 0？
不是所有 flex 子项都需要，只对尺寸/比例/可读性敏感的固定型内容才必须加：
- 导航栏里的 Logo（文字或图片，320px 宽下也不能压成一条线）
- 带图标的按钮（
<button><svg></svg>提交</button>，SVG 缩成小点就不可识别） - 侧边栏（
width: 240px），主区收缩时不能塌成 50px - 表单中带单位的输入框（如
<input>px），单位文本需视觉对齐 - 短文本标签（“已读”“VIP”），被压成 “…” 就信息丢失
别全局写 * { flex-shrink: 0 } —— 这会让正常流式区域彻底失效。
移动端小屏下 flex-shrink: 0 的坑
它能保住单个元素形态，但容易引发新问题：多个 flex-shrink: 0 元素并排，总宽超容器，直接触发横向滚动条，而不是换行。
- 检查是否误设了
flex-wrap: wrap—— 看起来像“挤在一起”，其实是换行了 - 小屏下优先用媒体查询降级为
flex-direction: column，比硬撑更可靠 - 若必须横排，给父容器加
overflow-x: auto，但前提是父容器有明确width（比如width: 100vw），否则无效 - React/Vue 中动态类名切换时，注意内联样式（如
style={{ flex: '0 1 auto' }}）会覆盖 CSS 类里的flex-shrink: 0
真正容易被忽略的，是嵌套 flex 链路里每一层的收缩行为——flex-shrink: 0 只管直接父容器，不管祖辈容器是否在收缩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
