一個box-sizing: border-box和felx混合使用中遇到的問題

以前在項目中遇到一個佈局上很趣的問題(也多是筆者才疏學淺，哈哈)。佈局大概是這樣的：

 

• 外層包裹器：採用flex佈局，並指定內部子彈性盒子元素水平顯示
• 側邊欄：flex盒子的子元素，可收起和展開。展開時顯示菜單圖標和菜單名稱，收起時僅顯示菜單圖標。點擊菜單圖標或者文字(整個菜單項)跳轉到預設置的路由上。展開時寬度爲200px，收起時寬度爲45px。
• 頭部與內容區域：flex盒子的子元素。設置爲flex: 1，寬度由外層包裹器flex盒子和側邊欄寬度決定。
• 項A、項B：flex盒子容器的子元素，水平顯示，外層被flex佈局的盒子容器包裹

看似是一個很日常的flex佈局，可是收起來的時候卻出現了橫向滾動條，當時有點懵逼，全部元素都實現應用了box-sizing: border-box;的設置，怎麼還會有這個狀況，並且只是出如今側邊欄收起的時候纔會。

排查過程當中，首先想到的就是：是否是內容區域撐開了，致使總寬度增長了，一看還真是的：

外層盒子容器的寬度爲1920px，側邊欄爲45px，內容區域爲1876px，計算結果：45 + 1876 - 1920 = 1，多了一個像素，TMD還有這奇葩狀況。

好吧，再深刻內容區域，發現內容區域內並無本身溢出寬度，而是由保持充滿外層寬度：

 

 

一行，也就是圖中'fs-dashboard-row'類的元素的寬度爲1856px，row裏面水平排布的flex子元素項A和項B爲923px寬度，恰好爲1856。也就是說是這裏超出了1px。爲何呢？

我試着把項A和項B的計算完成後的寬度設置爲922.5px，也就是讓一行row的寬度爲1845px，可是我去改寫的時候瀏覽器報了個錯在控制檯，重點來了：

報錯信息：

For elements with box-sizing: border-box, only absolute content area dimensions can be applied.

翻譯過來就是：

對於具備框大小的元素：邊界框，只能應用絕對內容區域維度。

而後筆者再次雙擊修改width的寬度的地方，再退出修改，寬度就被還原回了923px。

也就是說，若是給一個盒子元素設置了box-sizing: border-box，它的寬度必須是一個整數，而在筆者的這個狀況下，項A和項B被flex要實現寬度正真均分的話，是922.5px，但flex佈局分配給它們的倒是923px，各多出了0.5px，最後就多出了1px，而致使了橫向滾動條的出現。罪魁禍首就是flex佈局在計算寬度的時候，按照box-sizing: boder-box屬性的這個原則，把922.5px的寬度給向上取整了。

一口老血噴了出來。由於咱們不敢保證用戶會把瀏覽器寬度拉伸成偶數仍是奇數，拉伸成奇數就沒這個問題，拉伸成偶數就有這個問題，咱們單純地在代碼中調整寬度是沒用的。

 

好吧，怎麼解決這個問題，

筆者用了個最暴力的辦法，給出現橫向滾動條的那一層盒子元素設置overflow-x: hidden。