三个按钮写 flex: 1,在安卓 4.4 的 WebView 里全挤在左侧 80px 宽,右侧大片空白,Chrome 90 上均分正常。第一次遇到会往复杂处想,其实漏掉的多是个小前提。

.actions { display: flex; width: 100%; }
.actions > button { flex: 1 1 0%; min-width: 0; }

旧内核把 flex: 1 解析成 flex-grow 加 flex-basis 0%,在不定宽容器里基准计算有偏差,子项按内容宽度收缩。也没有写 min-width: 0。这一点先确认清楚,后面就不用反复试。

「flex 旧内核」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。

改完隔一天再看一次,当场正常不代表能稳住。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。

具体做法是,显式写 flex: 1 1 0% 三个值都写全;子项加 min-width: 0 允许收缩;父容器给明确宽度 不要靠内容撑;用旧内核设备打开对比三个按钮宽度。

改完照着核一遍,旧内核上三个按钮等宽铺满整行,与 Chrome 上的截图一致。

作者 9823189