溢出隐藏不隐藏 child 元素

Question

我有一个难题。我进行了一些研究，但在堆栈溢出和其他资源方面都一无所获。

我是专业 html 开发的新手，运行遇到了隐藏溢出内容的奇怪问题。我已将问题简化为最基本的部分，没有 js、样式表或自定义元素。重现问题的纯可读性 HTML。

<html>
  <body style="background-color:yellow;display: flex;">
    <div id="grey" style="overflow:hidden; background-color:grey">
      <div id="blue" style="width:3036px; height:4048px; position:relative; min-width:30px; background-color:blueviolet"></div>
        <div id="red-parent" style="position: absolute; left:-276px; top:-457px; width:3036px; height:4048px;">
        <div id="red" style="width:17.0753%; height:3.0736%; left:19.2951%; top:25.3572%; position:absolute; background-color:red;"></div>
      </div>
    </div>
    <div id="filler" class="fill-height" style="min-width: 100;"></div>
  </body>
</html>

我的印象是 overflow:hidden 应该隐藏绝对定位的溢出元素以及任何东西。

从这个结果来看，它似乎隐藏了蓝色的溢出，而不是 red-parent 的！ red-parent 是透明的，以便于查看问题，但 red-parent 并没有被隐藏。它也不是 child。这对我来说似乎是错误的。

谁能给我解释一下为什么红色部分没有被隐藏，我该如何补救？

P.S。这发生在 firefox、opera 和 chrome 中，但如果这对您的解决方案很重要，我正在专门为 chromium 浏览器（electron）开发。

Answer 1

position: absolute 是相对于包含块（这是一个父块，除了静态之外具有任何位置）设置的。

如果您将代码更改为这样，它可以正常工作：

<html>

<body style="background-color:yellow;display: flex;">
  <div id="grey" style="overflow:hidden; background-color:grey;position: relative;">
    <div id="blue" style="width:3036px; height:4048px; position:relative; min-width:30px; background-color:blueviolet"></div>
    <div id="red-parent" style="position: absolute; left:-276px; top:-457px; width:3036px; height:4048px;">
      <div id="red" style="width:17.0753%; height:3.0736%; left:19.2951%; top:25.3572%; position:absolute; background-color:red;"></div>
    </div>
  </div>
  <div id="filler" class="fill-height" style="min-width: 100;"></div>
</body>

</html>

Answer 2

尝试在 id="grey" 中添加一些特定的宽度和位置：absolute。它肯定会起作用。

<div id="grey" style="overflow:hidden;background-color:grey;width: 600px;position: absolute;">

</div>

输出

溢出隐藏不隐藏 child 元素

Overflow Hidden not hiding child Element

html

css

css-position