flex-shrink不支持负值，浏览器会静默忽略，不会报错；若devtools中该属性带删除线或computed值为默认1，即证实因负值失效。
flex-shrink 不支持负值，浏览器会直接忽略该声明，不会报错，也不会触发控制台错误信息。所谓“解析报错”是误解——它只是静默失效。
flex-shrink 写了负数却没效果，怎么确认是不是这个原因？
- 打开 DevTools → 选中元素 → 切到 Styles 面板
- 搜索
flex-shrink - 如果值显示为
-1或-0.5，但右侧带删除线（strikethrough），说明该 CSS 声明被浏览器判定为无效，直接丢弃 - 查看 computed 面板里
flex-shrink的实际值，大概率是1（即回退到默认值）
为什么有人以为写了负值会报错？
常见混淆点来自：
- 把
flex-grow和flex-shrink记混（flex-grow同样不支持负值，行为一致） - 在
flex简写中误写成flex: 1 -1 100px→ 整个flex声明可能被整条忽略（尤其老 WebView） - 使用 PostCSS 或构建工具时，插件（如 autoprefixer）遇到非法值可能 warn，但这是构建时提示，不是运行时错误
真正要检查的三类“看似报错实则静默”的情况
-
flex: 0 -1 auto这种写法：整个flex声明在 Chrome ≥90、Safari ≥14.1 中会被忽略，Firefox 可能部分降级，不报错但不生效 - 在 Tailwind 中手写
flex-shrink-[-1]（用 arbitrary value）：Tailwind 默认不生成负值类，编译后无对应 CSS，DOM 上根本没这个 class - 使用 CSS-in-JS（如 styled-components）动态插值：
flexShrink: ${value}，若value === -1，最终生成的 CSS 仍为无效声明，且无 runtime 报错
怎么避免掉进这个坑？
- 查文档确认取值范围：
flex-shrink只接受 非负数字（0、1、2…），没有-0或小数以外的“特殊语义” - 想“反向撑开”，别动
flex-shrink，改用：flex-grow+min-width组合，或换grid布局 - 调试时优先看 computed 值，而不是 styles 面板里的原始声明 —— 它更反映真实渲染行为
- 在 CI 或本地 lint 阶段加 CSS 校验（如 stylelint 的
declaration-property-value-blacklist规则），拦截flex-shrink: -*
最常被忽略的一点：你从来不会在控制台看到 flex-shrink: -1 的报错，但它的失效会一路传导到布局崩坏——而你还在找 JS 错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
