利用padding和box-sizing实现纯CSS隐藏滚动条

在网上搜关键词“css 隐藏滚动条”，基本上都是以下两种结果：

1. overflow: hidden
   好吧，我相信搜这个问题的人一定是知道overflow的，人家显然是想问隐藏了滚动条后还能继续滚动的方法。关键是有一半的搜索结果都是在给我们介绍overflow。。。
2. ::-webkit-scrollbar {display:none}
   这个伪元素从效果上是可行的，然而这个webkit前缀就表示了它基本上只能在chrome里生效，显然无法解决问题。

这里提供一个可以完美实现隐藏滚动条的方法，主要是利用了在box-sizing为content-box模式下的时候的一个奇特的性质：当给元素设置padding-right的时候，滚动条会被往外挤，使得当前元素的宽度增加，这时我们只需要在当前元素外面套一层和当前元素原始宽高相同的元素，再将外层元素设置为overflow: hidden 就可以隐藏滚动条了。
示例代码如下：

body {
  display: flex;
  height: 100vh;
}
//外层元素
.box1 {  
  height: 20%;
  width: 20%;
  border: 1px solid #008080;
  margin: auto;
  overflow: hidden;
}
//内层可滚动元素
.box2 {
  box-sizing: content-box;
  height: 100%;
  padding-right: 17px;
  width: 107%;
  overflow: auto;
}

<div class="box1">
  <div class="box2">
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
    <p>ddddd</p>
  </div>
</div>

http://codepen.io/almon123/pen/KrAxJR