overflow-x和overflow-y设置冲突问题解决方案

问题情景还原：

对一个元素设置CSS overflow-x: hidden; 和 overflow-y: visible;

理想状况下，在X轴超出部分隐藏，Y轴超出部分显示。然而，overflow-y元素属性并没有生效。

原因分析：

一般来说“overflow-x”和“overflow-y”的计算值与它的指定值相同，但是在特定的情况下两者会有冲突：

如果其中一个指定为“visible”，而另一个是“scroll”或“auto”，那么“visible”就会被设置为“auto’”。在Gecko，Safari，Opera中，‘visible’与’hidden’结合时也会变成’auto’。

也就是说，如果同一个元素X,Y轴上，其中一个设置了visible，另外一个设置了scoll或者auto，这时候，visible属性自动转变为auto。

解决方案：

1、在目标属性外，嵌套父层，一个设置overflow-x: hidden;另外一个设置， overflow-y: visible; 即可。
（这种方法网上抄的，不确定有用）
例：

修复前代码

#content {
height: 100px;
width: 200px;
overflow-x: hidden;
overflow-y: visible;
}

使用一个包装 div来应用overflow-x和overflow-y不同的DOM元素，进行修复后代码如下：

#wrapper {
height: 100px;
overflow-y: visible;
}
#content {
width: 200px;
overflow-x: hidden;
}
2、这种方法亲测有用
#content {
width: 200px;
overflow: hidden;
padding-bottom: 250px;
margin-bottom: -250px;
}