flex-shrink: 0能“救”width失效，因其关闭默认压缩开关，使width或flex-basis真正参与主轴计算；但必须配合显式flex-basis（如flex: 0 0 50%），否则仍回退auto，且父容器宽度须确定、兼容性需兼顾。
flex-shrink: 0 为什么能“救” width 失效
不是 width 被忽略了，而是它根本没机会参与主轴尺寸计算——Flex 子项默认是 flex: 0 1 auto，其中 flex-shrink: 1 允许压缩，flex-basis: auto 会优先按内容宽度算出初始尺寸，width 只剩个参考值。加 flex-shrink: 0 就是关掉这个“让出空间”的开关，让 width 或 flex-basis 真正落地。
只写 flex-shrink: 0 还不够，必须配 flex-basis
单独加 flex-shrink: 0 后，如果没设 flex-basis，浏览器仍会回退到 auto，结果还是看内容撑多宽。所以必须显式声明尺寸基准：
-
flex: 0 0 50%（推荐）：等价于flex-grow: 0; flex-shrink: 0; flex-basis: 50% -
flex-shrink: 0; flex-basis: 200px：比只写width: 200px更可靠 - 避免混用：
width: 200px和flex-basis: 50%不要共存，不同浏览器处理不一致
父容器宽度不定，flex-basis 百分比照样失效
flex-basis: 50% 的百分比是相对于父容器宽度的，如果父容器本身没定宽，结果就不可控：
- 父容器是
display: inline-flex且没内容撑开 → 宽度为 0，50% 就是 0 - 父容器被
max-width、浮动、position: absolute限制 → 百分比按那个受限宽度算 - 用开发者工具检查父容器 Computed 中的
width值，确认是否是你以为的“全宽” - 若父容器是
inline-flex，要么加width: 100%，要么直接改用display: flex
IE 和旧 Safari 里 flex-basis 百分比不认账怎么办
IE10/11 对 flex-basis 百分比支持极差；Safari ≤12.1 也有类似问题。此时不能硬刚：
- 子项数量固定（比如两个）→ 统一写
flex: 1，靠均分机制视觉上接近 50% - 需要留间隙 → 改用
flex-basis: calc(50% - 4px)，比纯百分比更可控 - 极端兼容场景 → 放弃百分比，用
flex-basis: 0; flex-grow: 1配合已知数量，或退回display: table
真正卡住人的地方从来不是“要不要加 flex-shrink: 0”，而是忘了查父容器宽度是否真实存在、以及没意识到 flex-basis 百分比在老浏览器里根本不会解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
