flex-shrink: 0单独无效，因浏览器回退到flex-basis: 0致图片坍缩；须组合flex: 0 0 auto、width: auto、height: auto、min-width: 0，并确保img为直接flex子项，再配object-fit和align-items: flex-start。
flex-shrink: 0 单独写为什么不管用
它确实禁用了收缩计算，但没告诉浏览器“从多宽开始不缩”——浏览器找不到基准，就回退到 flex-basis: 0，图片直接坍缩成一条竖线。尤其在窄容器、嵌套 Flex 或移动端 viewport 受限场景下，这种坍缩特别明显。DevTools 里看到 flex-shrink 是 0，但渲染宽度只有 2px，就是这个原因。
img 必须加的最小可靠组合
只靠一个属性无法兜底，必须协同控制外框行为和内容渲染：
-
flex: 0 0 auto：等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，明确以图片固有尺寸为起点 -
width: auto; height: auto：防 CSS 重置（如 Tailwind Preflight）或框架样式覆盖 intrinsic 尺寸 -
min-width: 0：关键！浏览器对替换元素默认min-width: auto，不加这句，嵌套 Flex 中图片仍会被压成细线 - 若需裁剪适配，再加
object-fit: cover或object-fit: contain——但必须等前三者生效后才起作用
align-items: stretch 是垂直拉伸的元凶
Flex 容器默认 align-items: stretch，在 flex-direction: row 下会让所有子项（包括 img）强行撑满容器高度。哪怕图片原始高是 50px，也会被拉成 200px。这不是 bug，是默认行为。
解决方法很简单：
立即学习“前端免费学习笔记（深入）”；
- 主轴水平时，父容器加
align-items: flex-start或align-items: center - 主轴垂直（
flex-direction: column）时，交叉轴变成水平方向，此时要改justify-content或确保min-width: 0已设 -
align-self只影响单个子项，且仅当该img是直接 flex item 才有效
Tailwind 用户要注意的硬坑
Tailwind 没内置 flex: 0 0 auto 的工具类，shrink-0（即 flex-shrink: 0）远远不够：
- 别依赖
max-w-full：它会锁死宽度，配合object-contain反而导致留白异常或截断 - 手动补
min-w-0和内联style="width: auto; height: auto;"更稳 - 如果用了
aspect-video等比例类，得确认父容器有高度来源（否则 Safari 旧版会塌陷） - 动态加载场景（React/Vue），光靠 CSS 不够，预设
aspect-[16/9]或用loading="lazy"配合占位更可靠
真正容易被忽略的是：所有这些规则都建立在一个前提上——img 必须是 直接 的 flex 子项。如果它被包在 div 里，那 flex: 0 0 auto 加在 img 上就完全无效。
