为什么“溢出-x：隐藏”也隐藏溢出-y？答案

【问题标题】：Why is "overflow-x: hidden" also hiding overflow-y?为什么“溢出-x：隐藏”也隐藏溢出-y？
【发布时间】：2020-06-23 16:00:50
【问题描述】：

编辑 2：原来问题不在于溢出，而与祖父元素的网格有关。我的问题应该是this。这使得整个帖子变得无关紧要。带来不便敬请谅解。它不会让我删除帖子。

编辑：Here is a JSFiddle 到我的代码库，因为到目前为止的答案都是正确的，但不适用。下面是我的问题的超级简化版本。

我已经阅读了很多关于这两个溢出如何相互冲突的帖子（1、2、3 ...），但对我没有任何帮助。溢出-x & y 不能组合使用，我明白了。但我只声明一个......

段落不应在容器外（左右）可见。但是，设置 overflow-x: hidden 也会隐藏我的框的标题。（我希望标题超出边界）。

任何想法我做错了什么？

main {
  box-sizing: border-box;
  width: 300px;
  height: 150px;
  position: relative;
  margin: auto;
  margin-top: 50px;
  padding: 1em;
  outline: 3px solid;
  font-size: 16px;
  font-family: sans-serif;
  overflow-x: hidden;
}

h4 {
  font-size: 1.5em;
  background: white;
  position: absolute;
  top: -2em;
  left: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

p {
  white-space: nowrap;
}

<main>
  <h4>Lorem Ipsum</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec convallis leo.</p>
</main>

【问题讨论】：

“将一个轴设置为可见（默认），而将另一个轴设置为不同的值会导致可见行为为自动。” (see note in MDN) — auto 与 hidden 相同，但如果需要，可以使用滚动条，因此您的内容会被隐藏。最好的选择？为您的内部 <main> 的内容（如 <div><p>…</p></div>）添加一个包装器，并在该 div 上设置溢出规则。

标签： css overflow

【解决方案1】：

您的标题未显示，因为您已将 position: absolute 设置为它。只需删除绝对位置，让元素以自然顺序显示。

通过以下链接了解更多关于 css 定位的信息： https://www.w3schools.com/css/css_positioning.asp

还有一个链接解释了溢出属性的工作原理 https://www.w3schools.com/css/css_overflow.asp

【讨论】：

如果 ithis 解决了你的问题，你能在我的回答上签名作为这个问题的回答吗
正如我所提到的，我希望标题超出边界，就像在 this 示例中一样
如果您不能从主标签中删除相对位置，那么您可以尝试将主标签包装在另一个 div 中，使其成为内部元素的容器。您可以将该 div 设置为相对位置并相应地设置内部元素。这样内部元素将相对于包装器 div 定位。

【解决方案2】：

为什么“overflow-x: hidden”也隐藏了overflow-y？

overflow-x 和 overflow-y 将计算为 auto 如果一个是 visible 而另一个是 hidden、scroll 或 auto

演示

[test] {
  overflow-x: hidden;
  white-space: nowrap;
  border: 1px solid;
  width: 130px;
  height: 100px;
}

[overflow] {
  margin-top: 5px;
  height: 300px;
  width: 30px;
  background: red;
}

overflow-y should be visible because that is the default, but no.
<div test>
  Some long text, not really
  <div overflow>vertical overflow</div>
</div>

不要在<main>container 上隐藏溢出，而是在<p> 上隐藏它

main {
  box-sizing: border-box;
  width: 300px;
  height: 150px;
  position: relative;
  margin: auto;
  margin-top: 50px;
  padding: 1em;
  outline: 3px solid;
  font-size: 16px;
  font-family: sans-serif;
}

h4 {
  font-size: 1.5em;
  background: white;
  position: absolute;
  top: -2em;
  left: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

p {
  white-space: nowrap;
  overflow-x: hidden;
}

<main>
  <h4>Lorem Ipsum</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec convallis leo.</p>
</main>

【讨论】：

【解决方案3】：

从主目录中删除 position: relative;。
从 h4 中删除 left: 5px;
在 h4 中将 top: -2em; 更改为 top: 0em;

【讨论】：

我需要position: relative，否则我的 h4 是相对于根元素的，这是我不想要的..