URL: https://codepen.io/myf/pen/OJdNLWW
Browser / Version: Firefox 120.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome
Problem type: Something else
Description: Firefox vs Chrome discrepancy in scroll box constituted by flex box child with positioned item
Steps to Reproduce:
Seeking help to decide which implementation is conformant here, or if there are more bugs, or what's going on here actually.
If you make flex container with two items, let first item "fill it" (offset parent) entirely on the main axis and pull the second item back into first item's area using position relative, Firefox leaves some "phantom" space on the side from where the second item was pulled from and thus a scrollbar to reach it.
Chrome does not: no phantom space, and no scrollbar is instantiated.
In both cases there is no element wider that the container: the flex wrapper has the same width as the "filler" item.
What is strange to me that for line box constituted by non-wrapping inline-blocks, Chrome lets the phantom placeholder exist and accommodates it for scrolling, the same way as Firefox.
View the screenshot
Browser Configuration
From webcompat.com with ❤️
URL: https://codepen.io/myf/pen/OJdNLWW
Browser / Version: Firefox 120.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome
Problem type: Something else
Description: Firefox vs Chrome discrepancy in scroll box constituted by flex box child with positioned item
Steps to Reproduce:
Seeking help to decide which implementation is conformant here, or if there are more bugs, or what's going on here actually.
If you make flex container with two items, let first item "fill it" (offset parent) entirely on the main axis and pull the second item back into first item's area using position relative, Firefox leaves some "phantom" space on the side from where the second item was pulled from and thus a scrollbar to reach it.
Chrome does not: no phantom space, and no scrollbar is instantiated.
In both cases there is no element wider that the container: the flex wrapper has the same width as the "filler" item.
What is strange to me that for line box constituted by non-wrapping inline-blocks, Chrome lets the phantom placeholder exist and accommodates it for scrolling, the same way as Firefox.
View the screenshot
Browser Configuration
From webcompat.com with ❤️