根本原因是安卓4.4–6.0 WebView对flex-basis:auto处理异常，导致flex-shrink:0失效；必须显式设置flex-basis（如flex:0 0 200px）并真机测试验证。
Flex-shrink:0 为什么在安卓旧版 WebView 里不拦得住收缩
根本原因不是 flex-shrink 写错了，而是它依赖 flex-basis 的计算结果 —— 而很多安卓 4.4–6.0 的系统 WebView（尤其厂商定制版）对 flex-basis 的默认值 auto 处理异常：它会强行回退到内容宽度，再拿这个“被篡改过”的基准去算收缩比例，导致 flex-shrink: 0 实际失效。
典型现象是：本该固定宽度的侧边栏，在小屏安卓上被压扁，文字换行或图标错位，但 Chrome Desktop / iOS Safari 完全正常。
必须显式写死 flex-basis 才能兜住老安卓
只要给元素加上明确的 flex-basis 值，就能绕过 auto 的解析歧义。这不是“多此一举”，而是向老引擎明示：“别猜，就按这个尺寸当基准”。
- 用
flex-basis: 0+flex-grow: 1组合时，flex-shrink: 0才真正生效（常见于等分布局中的固定项） - 固定像素宽（如侧边栏）直接写
flex-basis: 260px，比只写width: 260px更可靠 - 百分比也行：
flex-basis: 25%，但注意父容器需有明确 width，否则部分 WebView 仍可能 fallback 到 auto - 避免用
flex-basis: content—— 这个值在绝大多数安卓 WebView 中被忽略或解析为 0
一行写全比分开声明更稳
把三个属性合在 flex 简写里，能减少浏览器解析顺序带来的不确定性。老 WebView 对单个属性的覆盖逻辑常有 bug，但对简写属性的处理反而更统一。
错误写法：
flex-grow: 0; flex-shrink: 0; flex-basis: 200px;
推荐写法：
flex: 0 0 200px;
含义清晰：flex-grow: 0（不放大）、flex-shrink: 0（不缩小）、flex-basis: 200px（基准尺寸）。部分三星、华为定制内核连 flex: none 都不认，所以宁可冗余写全。
测试时别只信 Chrome DevTools 的模拟
Android 5.1 的原生浏览器、某些银行/政务类 App 内置 WebView，它们的渲染引擎版本远低于桌面 Chrome，且禁用了远程调试。光靠 chrome://inspect 模拟无法复现真实问题。
- 真机必测：至少覆盖 Android 5.1（WebView 39）、6.0（WebView 44）两代
- 用
window.getComputedStyle(el).flexBasis在控制台打印，看返回值是不是你写的数值 —— 如果是auto或0px，说明flex-basis没生效 - 加一层防御：对关键 flex 项额外设
min-width，比如min-width: 200px，作为flex-shrink: 0失效时的兜底
老安卓的 Flex 行为差异不在文档里，而在厂商删减的源码分支中 —— 显式写死 flex-basis 是目前最轻量、最普适的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
