Bug 42930 – Inner div does not resize when outer div overflows and obtains scroll bars

• Status: NEW
• Component: CSS

Created attachment 62494 [details]
This is a reduction of the bug I am reporting

Take a look at my attachment first, as it is an example of the error.  If you do not understand what's wrong, try the page in FireFox or IE.

Essentially what's going on is that the effective height of the outer div tag is reduced when a scroll bar is added to the bottom.  However, the inner div tag is unaware of this height reduction, and maintains a height of 100% of the outer div tag's original height.  This in turn means that the inner div tag becomes too tall for the outer div tag, and forces a vertical scroll bar to appear as well, even though the inner div tag is set to be the height of the outer one and no larger.

The span tag & background colors are not necessary for producing the bug.  I simply think they make the bug easier to identify.  The problem occurs when the outer div tag's overflow property is set to "scroll" as well.  I imagine the bug happens with vertical overflow as well, though I have not tested this.  It is of note that if you use the website's body in place of the outer div tag, the bug does NOT occur.  This bug is particularly problematic when the outer div tag is set to "overflow-x: auto; overflow-y: hidden"

When viewing the error example for the first time, make sure your browser window is wide enough so that you see some of the gray.  After that, contract your window until scroll bars appear.

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 on macOS 12.5 based on attached test case and when resizing - scrollbar does not show and 'grey' area on shrink to certain limit and it also the case in Chrome Canary 106. Although in case of Firefox Nightly 104, grey area get removed completely and scrollbar appear (horizontal) in black area. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/97489000>