溢出-x被溢出-y覆盖[重复]答案

【问题标题】：Overflow-x overwritten by overflow-y [duplicate]溢出-x被溢出-y覆盖[重复]
【发布时间】：2012-07-27 09:27:23
【问题描述】：

似乎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;
}

【问题讨论】：

使用overflow-x: scroll; 而不是overflow-x: visible;，如下面的回答中所述。
不，我不希望 overflow-x 可滚动，我希望它可见。我希望content 的一部分脱离container。

标签： css stylesheet

【解决方案1】：

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

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

【讨论】：

你能给我一些关于这个的参考吗？

【解决方案2】：

已编辑：在 OP 提供更多详细信息后：

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

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

溢出值：

可见： 默认值。内容没有被剪裁，可能会在内容框外渲染。

隐藏：内容被剪裁，不提供滚动条。

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

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

See Reference

在 Gecko、Safari、Opera 中，当与“隐藏”组合时，“可见”也变为“自动”（换句话说：当与“可见”不同的任何其他内容组合时，“可见”变为“自动”）。 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’的一对计算值。

【讨论】：

也许我没有很好地解释我想要什么。我想制作一个列表（可能很长，因此我需要滚动），并且该列表的一个元素可能是活动的，并且在左边缘有一个小箭头，在 container 块的外部，因此我需要overflow-x 可见。
@EtienneBrodu：了解更多细节后更新了我的答案。
我知道这个参考，并且我确切地知道每个选项的作用。我不明白为什么visible 和auto 不能合并。我用的是最新的firefox和chrome，都不能在y方向显示滚动条，在x方向可见。
这是浏览器行为。 auto: 取决于用户代理（桌面浏览器）。如果内容溢出，像 Firefox 这样的桌面浏览器会提供滚动条。
@EtienneBrodu：为您的知识添加了更多详细信息。