0

I have a conundrum. I have researched a bit and am coming up blank, both on stack overflow and other resources.

I am new to professional html development and am running into a strange issue with hiding overflow content. I have cut the issue down to its most basic parts with no js or style sheets or custom elements. Just pure readable HTML that reproduces the issue.

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

example

I am under the impression that overflow:hidden ought to hide overflowing elements that are absolutely positioned as well as anything.

Judging by this result it appears to hide blue's overflow, but not red-parent's! red-parent is transparent to make the problem easier to view, but red-parent is not being hidden. Nor is its child. This seems wrong to me.

Can anyone explain to me why the red section is not hidden and how I might remedy this?

P.S. this occurs in firefox, opera, and chrome alike, but i am developing exclusively for a chromium browser(electron) if that matters for your solutions.

Katie N.
  • 41
  • 7
Jody Sowald
  • 342
  • 3
  • 18

2 Answers2

2

position: absolute is set relative to the containing block (which is a parent block that has any position except static).

If you change your code to this, it works fine:

<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>
Kalimah
  • 11,217
  • 11
  • 43
  • 80
  • Thank you for explaining why the position tag needs to be set on the containing element. i was completely lost on it and that did the trick! Thank you! – Jody Sowald Nov 07 '19 at 16:53
1

Try add some specific width and position: absolute in id="grey". it will work for sure.

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

</div>

OUTPUT

enter image description here

Par Tha
  • 1,265
  • 7
  • 10
  • 1
    Thank you! that worked, though i found that setting the container's width explicitly was not needed, just the position:relative! – Jody Sowald Nov 07 '19 at 16:54