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

转载于:https://www.cnblogs.com/rock-roll/p/9263629.html