flex-shrink: 0 失效主因是前提缺失或被覆盖：父容器未设 display: flex、被 flex: 1 等简写覆盖、子项非直接 flex item、align-items: stretch 导致高度变形，或缺 min-width: 0 解除替换元素默认限制；图片/图标须用 flex: 0 0 auto + width: auto + height: auto 才稳。
flex-shrink: 0 为什么加了还不起作用
直接写 flex-shrink: 0 失效，大概率不是语法错，而是被隐式规则覆盖或前提缺失：
• 父容器没设 display: flex 或 display: inline-flex → 整个 flex 属性不解析
• 子项用了 flex: 1、flex: auto 这类简写 → 它们默认带 flex-shrink: 1，会覆盖后写的 flex-shrink: 0
• 子项是 <img> 且父容器有 align-items: stretch（Flex 默认）→ 图片被垂直撑开，此时 flex-shrink: 0 只管水平收缩，不管高度变形
• Chrome/Firefox 对 flex 项自动加 min-width: auto，单靠 flex-shrink: 0 不释放这个隐式底线，得配 min-width: 0
图片/图标类元素必须用 flex: 0 0 auto 而非只写 flex-shrink: 0
flex-shrink: 0 只跳过收缩计算，但不定义尺寸起点。对 <img> 这种替换元素，flex-basis 默认 fallback 到 0 或 100%，结果要么塌成一条线，要么被拉伸变形。
真正稳的写法是：
• flex: 0 0 auto：显式锁死 grow、shrink、basis，以内容固有尺寸为基准
• 再补 width: auto; height: auto; 防止祖先样式污染
• 若父容器有固定高 + align-items: stretch，必须加 object-fit: contain 或改父容器 align-items: flex-start
文本容器该用 min-width: 0 而不是 flex-shrink: 0
给文字包裹的 <div> 加 flex-shrink: 0 是错的——它会锁死宽度，导致长单词溢出或换行失效。
浏览器对 flex 子项有隐式 min-width: auto（即“不能比最长单词还窄”），加 min-width: 0 才真正告诉它：“可以压到 0，该换行就换行”。
注意：
• 必须作用在文本容器自身，不是父 flex 容器
• 需配合 word-break: break-word 或 overflow-wrap: break-word 处理长英文/URL
• white-space: normal 要确保没被覆盖
响应式场景下 min-width: 0 比 flex-shrink: 0 更底层有效
当布局要适配小屏或动态增删子项时，min-width: 0 的作用比 flex-shrink: 0 更根本：它重置的是 flex 算法对“最小内容宽度”的假设，而 flex-shrink: 0 只是跳过一次收缩计算。
实际踩坑点：
• 在移动端，flex-shrink: 0 可能导致横向滚动条意外出现，因为宽度被硬锁死
• min-width: 0 允许子项压缩至 0，触发换行或折叠，更符合响应式预期
• 两者不互斥，但用途完全不同：前者保固定尺寸，后者保流式行为；混用前先想清楚你要保的是“像素值”还是“可读性”
立即学习“前端免费学习笔记（深入）”；
