今天遇到了一个关于滚动条的问题，为了处理这个问题整整试了一上午，
，印象深刻，遂作此文章，以备后用。
* 子元素的宽度默认会撑满父元素的宽度
* 没有滚动条时
子元素宽度 = 父元素宽度
* 有滚动条时
父元素的有效宽度会变小
父元素宽度 = 原父元素宽度 - 滚动条宽度
* 因此子元素重新调整宽度
子元素宽度 = 原父元素宽度 - 滚动条宽度
* 此时子元素明显会因为宽度变小而重新调整布局, 所以发生了挤压.
明白了前因后果, 就很好找解决方案了.
只要预留出滚动条的空间, 让子元素的宽度在有滚动条和没有滚动条时不发生变化就可以了.
* 方式一: 限定内层元素的最大宽度以预留出滚动条的宽度
实 现: max-width: calc(300px - 17px); /* 父元素宽度 - 滚动条宽度 */
* 方式二: 让内层元素的最小宽度占满父元素, 通过 padding 预留出滚动条的宽度
实 现: min-width: 300px; /* 父元素宽度 */
padding-right: 17px; /* 滚动条宽度 */
box-sizing: border-box; /* 让元素宽度包含 padding, 否则元素会被滚动条遮挡 */
PS: 方式一和方式二的实现效果有细微的差别, 大家请根据实际需求来选择.