flex-basis：0 vs 0%

写代码手一抖，就给自己挖了一个坑：

// 异常情况 
flex: 1 1 0; 

// 正常写法
flex: 1 1 0%;

少写了一个百分号（%）结果就在vivo手机上出现flex-item撑不开父级元素，从而导致better-scroll无法正常使用。定位这个问题时，无数遍问候vivo。。发现这个问题后，瞬间。。。

逗比事件总太多，然而总不能掉坑里好几次，发现问题，知根究底：

flex: 1 1 0;
浏览器会解析为：

flex-basic: 0

而

flex: 1 1 0%; // === flex: 1
会被解析为

flex-basic: 0%

flex-basis 中的0px vs 0% 这两者有什么区别？

首先需要了解flex-basis的作用：

这个属性决定CSS如何给可伸缩项在容器中分配初始大小.
详细说明：Flexbox，终于可以承认自己明白了

image.png

图来源一张图理解Flexbox的3个核心属性

也就是说flex-basis决定了初始大小怎么设定，这样看来其实也没有影响，唯一的猜测就是在解析的时候，没有把 flex: 1 1 0正常解析。也就是0 没有解析为0px。等有空再复现场景再确认一番。