冲突展示

描述：

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

html 代码描述

<div class="overflow-wrapper">
    <input/>
    <input/>
    <input/>
    <input/>
    <input/>
    <input/>
</div>

样式代码描述

注意input元素的宽度和所有input元素的高度，都会超出父容器的便捷。虽然我只想让垂直方向的溢出内容被滚动条接管，但是因为冲突机制，我水平方向的溢出内容，不再是默认的visible，而是auto，出现了滚动条。

 .overflow-wrapper {
    position: absolute;
    max-height: 205px;
    overflow-y: scroll;
    overflow-x: visible; // 不写浏览器行为也一样
    width: 300px;
    input {
        height:30px
        width:400px;
    }
  }

图片描述：

解决方案

思路分析

既然冲突机制无法避免，我们只要将父元素的宽度增加，保证完全超过子元素input的宽度，是的即便overflow-x:auto的情况下，内容不外溢，就不会出现滚动条。

但是：

当前容器非BFC，会影响其他元素的排列布局
如果变成BFC，又会导致本元素脱离文档流，也会影响布局。

最终修正

所以，三步走

先增加父容器的宽度
再通过 position: absolute 让父容器BFC
最后在父容器外再包一层容器，代替原有容器加载到文档流汇总，保证样式设计。

.overflow-wrapper {
  height: 205px;
  .overflow-wrapper-inner {
    position: absolute;
    max-height: 205px;
    overflow-y: scroll;
    width: 500px;
    :
  }
}

问题解决。

漫谈

BFC我们选择的方式为 position: absolute，原因是它虽然脱离了文档流，但是在你不改变其top、left、bottom、right时，它的定位仍旧在留的位置中。

在给它包一层div后，这个脱离文档流的元素，甚至可以跟随文档流一起移动，又不影响文档流的布局。

overflow-x和overflow-y设置冲突问题