之前在項目中遇到一個佈局上很趣的問題(也可能是筆者才疏學淺，哈哈)。佈局大概是這樣的：
- 外層包裹器：採用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。