一个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。