flex: 0 0 auto能阻止收缩，因为它等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，三者协同明确禁用伸缩并锚定固有尺寸，避免被flex简写覆盖，且必须搭配min-width: 0才能解除浏览器默认限制。
flex: 0 0 auto 为什么能阻止收缩
因为它明确禁用了收缩逻辑，而不是“建议不缩”。flex-shrink: 0 是浏览器在分配负剩余空间时的硬性过滤器：设为 0 的项会被直接跳过整个收缩计算流程。而 flex: 0 0 auto 是 flex-grow、flex-shrink、flex-basis 的完整简写，等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，三者协同生效，不会被其他简写（如 flex: 1）意外覆盖。
为什么单独写 flex-shrink: 0 常常没反应
失效不是语法问题，而是被更高优先级规则或隐式行为抵消了：
- 父容器没设
display: flex或display: inline-flex——flex-shrink在非 Flex 容器里完全无效 - 子元素被
flex: 1、flex: auto等简写覆盖，这些会重置flex-shrink为 1 - 开发者工具里看到
flex-shrink: 0被划掉（strikethrough），说明有更具体的规则（比如来自 Tailwind 的flex工具类）在起作用 -
flex-basis没配对：只设flex-shrink: 0，但flex-basis是0或100%，图片/文字仍会坍缩或拉伸
flex: 0 0 auto 必须搭配 min-width: 0 才真正可靠
即使写了 flex: 0 0 auto，浏览器仍会给 、
必须同步加 min-width: 0（作用于该元素自身，不是父容器），才能解除这层 UA 默认限制。典型组合如下：
立即学习“前端免费学习笔记（深入）”；
img {
flex: 0 0 auto;
min-width: 0;
max-width: 100%;
height: auto;
}
漏掉 min-width: 0，哪怕 flex: 0 0 auto 显示生效，长 URL、连续英文或未约束的图片依然会让布局错位或溢出。
flex: 0 0 auto 不等于“永远按内容宽显示”
它只是说“不放大、不缩小、基准按内容来”，但最终尺寸仍受上下文制约：
- 若父容器
width极小，且没设overflow-x: auto，它会直接溢出视口，而不是压缩 - 若子项内含无空格长串（如
https://...），需额外加white-space: nowrap配合text-overflow: ellipsis，否则折行会让flex-basis: auto按单行宽计算 - 在
flex-direction: column下，flex-basis控制的是高度，此时要检查min-height: 0和max-height是否配合
真正难的从来不是写对那一行 CSS，而是判断这个元素在所有嵌套层级和断点下，是否还被某处 min-width: auto、flex-wrap 或框架重置样式悄悄接管了。
