Question

编辑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>

Answer 1

您的标题未显示，因为您已将其位置设置为“绝对”。只需删除绝对位置并保留要自然显示的元素即可。

在以下链接上了解有关CSS定位的更多信息： https://www.w3schools.com/css/css_positioning.asp

这里还有一个链接，解释了overflow属性的工作方式 https://www.w3schools.com/css/css_overflow.asp

Answer 2

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

Answer 3

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

如果

overflow-x和overflow-y中的一个为auto，另一个为visible，hidden或{{1}，则将计算为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>

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

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

3 个答案: