overflow-x属性同样会隐藏overflow-y的内容。

Question

有很多问题都被称为这个名称，但我没有找到适用于我的情况的问题，所以我来了：

在这个片段中:

#container:hover {
  overflow-x: hidden;
}

#container {
  position: relative;
  width: 400px;
  height: 40px;
  background: red;
  margin: 2em;
}

#child {
  position: absolute;
  bottom: 0;
}

<div id="container">
  <div id="child">
    a<br/>
    b<br/>
    hover<br/>
    me
  </div>
</div>

您可以看到，当您悬停在红色框上时应用的overflow-x也将隐藏溢出的overflow-y（至少在Chrome浏览器中是如此）。这很烦人，因为我有一个工具提示，我希望能够让它溢出到红色框的上方，同时我还有一个菜单，将从右侧滑动并应保持隐藏。

这是一个bug吗？有没有解决方法？

- Sharcoux

---

这是一个 bug 吗？也许不是 bug，但据我所知，它是 CSS 规范和预期行为的结果。 - Deykun

好的...你能告诉我你在哪里看到这个吗？根据我在这里阅读的内容，（https://www.w3.org/TR/css-overflow-3/#overflow-clip-edge），这不是我理解的overflow-x应该做的事情。 - Sharcoux

https://dev59.com/NWw15IYBdhLWcg3wv-VM - 在第一个答案中引用了W3C规范的内容，但他们可能已更新该页面的内容，也许规范也更新了。 - Deykun

即使使用这个句子，我们在这里看到的行为也不匹配。我们没有overflow-x: hidden和overflow-y: (visible -> auto)。我们有overflow-x: hidden和overflow-y: (visible -> hidden)。 - Sharcoux

我的意思是由于同一原因，这些连接之间的某些连接不起作用。 - Deykun

Answer 1

你无法改变 overflow-x 和 overflow-y 的行为（在 Firefox 和其他浏览器中都是相同的），但你可以改变 HTML 的组织方式。

将所有想要隐藏溢出内容的元素放在一个包装器中。将你的工具提示放在另一个包装器中。

类似下面这样的东西可能适合你的需求：

#container {
  position: relative;
  width: 400px;
  background: #f77;
  margin: 3em 2em;
}

#child {
  overflow: hidden;
  position: relative;
}

#menu {
  position: absolute;
  left: 100%;
  top: 0;
  background: #dd2;
  transition: .2s;
}

#child:hover #menu {
  transform: translateX(-100%);
}

#tooltip {
  position: absolute;
  bottom: 100%;
}

<div id="container">
  <div id="child">
    hover<br/>
    me
    <div id="menu">
      menu
    </div>
  </div>
  <div id="tooltip">
    a<br/>
    b
  </div>
</div>

---

剪切行为是bug吗？

不是，剪切行为符合规范。

用户代理(UAs)必须剪切滚动容器的块起始和内联起始盒子的可滚动溢出区域(因此表现得好像在该侧没有可滚动的溢出)。

在您的情况下，“块起始”侧是顶部，“内联起始”侧是左侧。这就是为什么您可以将提示工具放在内容下方，并且它会触发滚动条。

#container:hover {
  overflow-x: hidden;
}

#container {
  position: relative;
  width: 400px;
  height: 40px;
  background: red;
  margin: 2em;
}

#child {
  position: absolute;
  /* bottom: 0; */
  top: 0;
}

<div id="container">
  <div id="child">
    hover<br/>
    me<br/>
    a<br/>
    b
  </div>
</div>

所以为什么可以滚动到框下方溢出的内容，但不可能使其简单地可见？原因是当设置任何overflow属性为hidden时，整个框成为滚动容器。

[滚动容器]允许用户将其可滚动溢出区域的裁剪部分滚动到视图中。

- mfluehr

---

很不幸，这有点复杂，因为我正在使用React，而提示框是按钮的一个组件... 但是，如果我们都同意规范在这里没有得到遵守，那么这不就是一个bug吗？ - Sharcoux

@Sharcoux 我在我的回答底部添加了有关规格的信息。 - mfluehr

Answer 2

您可以使用overflow: clip，它不会将盒子转换为滚动容器。如果您在两个方向上进行剪辑，还可以使用overflow-clip-margin调整剪辑发生的距离：

#container:hover {
  overflow-x: clip;
}


#container {
  position: relative;
  width: 200px;
  height: 40px;
  background: red;
  margin: 2em;
}

#child {
  position: absolute;
  bottom: 0;
}

<div id="container">
  <div id="child">
    aazkopekzapoekzapoekzapoekzapoekpozakepozakepozakeoza<br/>
    b<br/>
    hover<br/>
    me
  </div>
</div>

- cghislai