在一般浏览器中，当内容超出容器时，如果不是overflow:hidden，通常都会出现滚动条，由于滚动条并不是浮在布局内容之上，所以通常会带来两个问题：

1，容器内部内容宽度固定，恰好撑满，此时出现滚动条会把内容挤到下一行(如图1.gif)；

.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),如此便不会在出现滚动条的时候将内容挤下去了，代码如下

.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中不兼容)