Question

似乎overflow-x和overflow-y的行为并不像我预期的那样。如果我将overflow-x设置为可见，将overflow-y设置为自动，overflow-x将不会显示为可见，但会隐藏。

我错过了什么，或者这是正常的吗？

Here就是一个例子。

HTML：

</html
  <body>
    <div class='container'>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
    </div>
  </body>
</html>

CSS：

.container {
  background: rgba(0, 0, 0, 0.1);
  width: 200px;
  height: 100px;

  overflow-y: auto;
  overflow-x: visible;
}

.content {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  margin-left: -14px;
  padding-left: 14px;
}

Answer 1

编辑：经过OP的更多细节后：

溢出CSS属性指定是否剪辑内容，渲染滚动条或显示块级元素的溢出内容。

使用值不同于可见值的overflow属性（默认值）将创建一个新的块格式化上下文。这在技术上是必要的，好像浮动将与滚动元素相交，它将强制将可滚动元素的内容重新包裹在侵入的浮动周围。在每个滚动步骤之后将发生重新缠绕，并且将导致非常慢的滚动体验。请注意，通过以编程方式将scrollTop设置为相关的HTML元素，即使溢出具有隐藏值，元素也可能需要滚动。

溢出值 ：

<强>可见：默认值。内容未被剪裁，可能会在内容框外呈现。

<强>隐藏：剪辑内容并且不提供滚动条。

<强>滚动：内容被剪切，桌面浏览器使用滚动条，无论是否剪切任何内容。这避免了滚动条在动态环境中出现和消失的任何问题。打印机可能会打印溢出的内容。

自动取决于用户代理。如果内容溢出，Firefox等桌面浏览器会提供滚动条。

See Reference

添加了更多详情：

来自：http://www.brunildo.org/test/Overflowxy2.html

在Gecko，Safari，Opera中，'visible'在与'hidden'结合使用时也变为'auto'（换句话说：'visible'与其他与'visible'不同的东西组合成'auto'）。 Gecko 1.8，Safari 3，Opera 9.5在它们中非常一致。

W3C spec也说：

'overflow-x'和'overflow-y'的计算值与它们的指定值相同，除了某些与'visible'的组合是不可能的：如果一个指定为'visible'而另一个是'滚动'或'自动'，然后'可见'设置为'自动'。如果'overflow-y'相同，'overflow'的计算值等于'overflow-x'的计算值;否则它是'overflow-x'和'overflow-y'的计算值对。

Answer 2

实际上，overflow-x在您的示例中将充当auto。

overflow-x和overflow-y的某些组合无法合并，因为它们根本无效。您不能在一个方向上在容器内部滚动内容，在另一个方向上在容器外部可见。

溢出-x被溢出-y覆盖

2 个答案: