在一般浏览器中，当内容超出容器时，如果不是overflow:hidden，通常都会出现滚动条，由于滚动条并不是浮在布局内容之上，所以通常会带来两个问题：
- 1，容器内部内容宽度固定，恰好撑满，此时出现滚动条会把内容挤到下一行(如图1.gif)；
<div class='container'>
<div></div>
<div></div>
<div></div>
</div>
.container{
width:300px;
height:200px;
background-color:#efefef;
overflow-y:hidden;
overflow-x:hidden;
padding:10px;
}
.container:hover{
overflow-y:auto;
}
.container div{
display:inline-block;
margin-right:5px;
width:92px;
height:300px;
background-color:#777;
}
1.gif
- 2，容器内容百分比计算，自适应宽度，鼠标经过出现滚动条，鼠标离开滚动条消失，会出现中间内容晃动(如图2.gif)
注：相对于上面的变化部分，仅是将内部div宽度设为百分比自适应
.container div{
width:calc(100% - 6px);
}
2.gif
那么我们如何来解决这两个问题呢？
我门可以在DOM布局中做些修改，在container内部再添加一层class="inner-container"的容器，并让其宽度=width(container)+width(scroller),如此便不会在出现滚动条的时候将内容挤下去了，代码如下
<div class='container'>
<div class='inner-container'>
<div></div>
<div></div>
<div></div>
</div>
</div>
.container{
width:300px;
height:200px;
background-color:#efefef;
overflow-y:hidden;
overflow-x:hidden;
white-wrap:nowrap;
padding:10px;
}
.container:hover{
overflow-y:auto;
}
.container div div{
display:inline-block;
margin-right:5px;
width:92px;
height:300px;
background-color:#777;
}
/*添加部分：一般ie中的滚动条宽度是24px*/
.inner-container{
width:calc(100% + 24px);
}
原理即是，让包裹子元素内部容器inner-container比外部容器container 的宽度大于一个滚动条宽度，这样即使滚动条出现也不会影响子元素。
一般来说windows下IE的滚动条宽度为24px，所以加上24px即可，如果是在谷歌中既可以设置滚动条宽度，或者设置overflow：overlay 也可（不过这个属性在IE中不兼容）
