window系统浏览器为什么经常出现X轴滚动条？

body {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

这段代码被我大量应用到项目中
为什么width是100%，而不是100vw？
这是为了解决window浏览器的滚动条的原因，当你width:100vw,height:100vh的时候，window浏览器就会出现X和Y轴两个滚动条。
而width是100%，height: 100vh;就不会，什么原因，自己去调试研究下就懂了。

mac系统的web开发者估计从来不被滚动条困扰，但请不要掩耳盗铃，因为你的window用户任然会被滚动条烦扰，希望对你有帮助。