overflow-x被overflow-y覆盖

Question

overflow-x被overflow-y覆盖

3

似乎 overflow-x 和 overflow-y 的行为不符合我的期望。如果我将 overflow-x 设置为 visible，而将 overflow-y 设置为 auto，则 overflow-x 不会表现为 visible，而是隐藏的。

我是不是漏掉了什么，还是这是正常的？这里有一个示例。

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

- etnbrd

请使用overflow-x: scroll;而不是overflow-x: visible;，如下面我的答案所述。 - Ahsan Khurshid

1

不，我不想让overflow-x可滚动，我希望它可见。我希望content的一部分超出container。 - etnbrd

2个回答

3

编辑：根据OP提供的更多细节：

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

使用overflow属性与不同于visible的值，即其默认值，将创建一个新的块级格式化上下文。这在技术上是必要的，因为如果浮动与滚动元素相交，它将强制重新包装可滚动元素的内容以避免干扰的浮动。重新包装会在每个滚动步骤后发生，并导致滚动体验过慢。请注意，即使overflow具有hidden值，通过以编程方式将scrollTop设置为相关HTML元素，元素可能仍需要滚动。

Overflow的值：

visible： 默认值。内容未被裁剪，可能在内容框外呈现。

hidden： 内容被裁剪，没有提供滚动条。

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

auto： 取决于用户代理。桌面浏览器（如Firefox）在内容溢出时提供滚动条。

参考文献

添加更多细节：

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

在Gecko、Safari和Opera中，当'visible'与'hidden'组合时（换句话说，与任何不同于'visible'的其他东西组合时），'visible'也会变成'auto'。Gecko 1.8、Safari 3和Opera 9.5非常一致。

同时，W3C规范也指出：

计算出的“overflow-x”和“overflow-y”的值与其指定的值相同，但某些与“visible”组合不可能：如果其中一个被指定为“visible”，而另一个是“scroll”或“auto”，则“visible”将被设置为“auto”。如果“overflow-y”相同，则“overflow”的计算值等于“overflow-x”的计算值；否则它是“overflow-x”和“overflow-y”的一对计算值。

- Ahsan Khurshid

1

也许我没有很好地解释我想要的。我想制作一个列表（可能很长，因此我需要滚动），并且该列表的一个元素可以是活动状态，并在左边缘具有一个小箭头，在container块的外部，因此我需要overflow-x可见。 - etnbrd

@EtienneBrodu：在更多细节之后更新了我的回答。 - Ahsan Khurshid

1

我知道这个参考文献，也知道每个选项的作用。但我不明白为什么 visible 和 auto 不能组合使用。我正在使用最新版本的 Firefox 和 Chrome 浏览器，但都无法在 y 方向上显示滚动条并在 x 方向上保持可见。 - etnbrd

这是浏览器的行为。 auto: 取决于用户代理（桌面浏览器）。像 Firefox 这样的桌面浏览器，如果内容溢出，则会提供滚动条。 - Ahsan Khurshid

@EtienneBrodu：为了让您更加了解，我添加了更多细节。 - Ahsan Khurshid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Guffa · Accepted Answer

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

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