flex-shrink: 0 不生效的典型表现是图片被压成细线或像素点，根本原因是未进入Flex收缩流程，常见于父容器未设display: flex、flex简写覆盖、内联元素溢出裁切或缺少min-width: 0。
flex-shrink: 0 不生效的典型表现
你写了 flex-shrink: 0，但图片还是被压成一条细线或像素点——这不是语法错了，而是它根本没进入 Flex 收缩计算流程。常见原因包括：
• 父容器没设 display: flex 或 display: inline-flex，flex-shrink 完全不解析
• 子项用了 flex: 1 这类简写，它隐含 flex-shrink: 1，会覆盖后面单独写的 flex-shrink: 0
• 图片是内联元素，且父容器或祖先设置了 overflow: hidden 或 text-overflow: ellipsis，视觉上像“被压”，实则是内容溢出被裁切
• Chrome/Firefox 默认给 Flex 项加了 min-width: auto，必须显式写 min-width: 0 才真正释放限制
图片防挤压的最小可靠组合
单写 flex-shrink: 0 对
• flex: 0 0 auto：锁死 flex-grow、flex-shrink 和 flex-basis，让图片按固有尺寸（intrinsic size）起步
• width: auto; height: auto：防止某些 CSS 重置规则覆盖 flex-basis: auto
• min-width: 0：解除浏览器默认的 min-width: auto 锁定，否则多层 Flex 嵌套时图片可能加载后突然细长或闪动
• 后续再加 object-fit: cover 或 object-fit: contain 控制图像填充方式——顺序不能反，先保外框，再调内容
为什么只设 width/height 不管用
在 Flex 布局里，width 和 height 只是“参考值”，真正起效的是 flex-basis。而所有子项默认带 flex-shrink: 1，只要总宽超限，浏览器就会无视你写的 width: 200px，强行按比例缩小。
• 若你写 flex-basis: 100%，它按父容器宽度算，父容器高度未约束时，图片纵向仍塌陷
• 若你依赖 flex-basis: auto 但漏了 min-width: 0，图片可能因祖先塌缩而无法渲染出固有宽高
• flex: 0 0 200px 比 width: 200px; flex-shrink: 0 更可靠，因为它直接切断了收缩入口，不依赖其他样式干预
移动端图片挤压的特殊处理
移动端宽度受限（比如 max-width: 100% 或 position: fixed 容器），默认 flex-shrink: 1 的
• 加 flex-shrink: 0 后，哪怕父容器只剩 50px 宽，图片也维持原始宽高比——前提是 flex-basis 和 min-width 已配齐
• 别写 width: 100%; height: 100%：这是强制拉伸，直接破坏宽高比
• object-fit 是补救手段，不是替代方案；外框被压扁了，object-fit: cover 只能在扭曲画布上裁图
最容易被忽略的是 min-width: 0 ——它不像 flex-shrink: 0 那样显眼，但缺了它，整个防护链就断在第一环。很多项目调试半天，最后发现只是少了一行这个声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
