寫代碼手一抖，就給自己挖了一個(gè)坑：

// 異常情況 
flex: 1 1 0; 

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

少寫了一個(gè)百分號(hào)（%）結(jié)果就在vivo手機(jī)上出現(xiàn)flex-item撐不開(kāi)父級(jí)元素，從而導(dǎo)致better-scroll無(wú)法正常使用。定位這個(gè)問(wèn)題時(shí)，無(wú)數(shù)遍問(wèn)候vivo。。發(fā)現(xiàn)這個(gè)問(wèn)題后，瞬間。。。

逗比事件總太多，然而總不能掉坑里好幾次，發(fā)現(xiàn)問(wèn)題，知根究底：

flex: 1 1 0;
瀏覽器會(huì)解析為：

flex-basic: 0

而

flex: 1 1 0%; // === flex: 1
會(huì)被解析為

flex-basic: 0%

flex-basis 中的0px vs 0% 這兩者有什么區(qū)別？

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

這個(gè)屬性決定CSS如何給可伸縮項(xiàng)在容器中分配初始大小.
詳細(xì)說(shuō)明：Flexbox，終于可以承認(rèn)自己明白了

image.png

圖來(lái)源一張圖理解Flexbox的3個(gè)核心屬性

也就是說(shuō)flex-basis決定了初始大小怎么設(shè)定，這樣看來(lái)其實(shí)也沒(méi)有影響，唯一的猜測(cè)就是在解析的時(shí)候，沒(méi)有把 flex: 1 1 0正常解析。也就是0 沒(méi)有解析為0px。等有空再?gòu)?fù)現(xiàn)場(chǎng)景再確認(rèn)一番。