设置了box-sizing: border-box; 为什么还有滚动条

滚动条出现的原因可能是由于设置了box-sizing: border-box;后，元素的宽度超过了其父容器的宽度。引用中提到的情况可能是因为在侧边栏收起时，元素的宽度变小，而父容器的宽度没有相应地调整，导致出现了横向滚动条。

解决这个问题的方法是给出现横向滚动条的那一层盒子元素设置overflow-x: hidden，即引用中提到的方法。这样可以隐藏横向滚动条，并确保元素在不改变父容器宽度的情况下适应其内部内容的宽度。

此外，还需要注意引用中提到的框的总宽度计算方式，即width + padding-right + padding-left + border-right + border-left。如果在元素的宽度计算中没有正确考虑这些属性，也可能导致滚动条的出现。

综上所述，设置了box-sizing: border-box;并不保证完全避免滚动条的出现，还需要确保元素的宽度不超过其父容器的宽度，并正确计算框的总宽度。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [一个box-sizing: border-box和felx混合使用中遇到的问题](https://blog.csdn.net/weixin_30251829/article/details/99976811)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [从box-sizing:border-box属性入手，来了解盒模型](https://blog.csdn.net/qq_26780317/article/details/80736514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]