Bug 258354

Summary: Negative margin causes overflow in nested flex scroll container
Product: WebKit Reporter: Lennard Scheibel <webkit-bugzilla>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: karlcow, sgill26, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: Mac (Intel)   
OS: macOS 13   
Attachments:
Description Flags
Minimal reproduction showing the bug. Red area is not visible when opened in Chrome or FF.
none
rendering in safari, firefox, edge, chrome
none
after scrolling rendering in safari, firefox, edge, chrome none

Description Lennard Scheibel 2023-06-21 07:00:51 PDT
Created attachment 466777 [details]
Minimal reproduction showing the bug. Red area is not visible when opened in Chrome or FF.

When creating a scrolling container with "overflow: scroll; display: flex; padding: 10px" and adding a child node with "flex-grow: 1; margin: -10px", Safari allows the user to scroll horizontally, where Chrome and FF don't.

The attachment contains a minimal reproduction. It should show how in Safari the green "Content" overflows on the x-axis, although its width should not be larger than its parent's width.

Next to Safari 16, this behavior can also be observed with the build 265350@main from JUNE 21, 2023 AT 02:27 PM GMT+2.

The closest I could find was https://bugs.webkit.org/show_bug.cgi?id=218579.
Comment 1 Karl Dubost 2023-06-21 19:48:30 PDT
Created attachment 466788 [details]
rendering in safari, firefox, edge, chrome

So I can't reproduce with Safari Version 17.0 (19616.1.18)
with 265385@main JUNE 22, 2023 AT 11:10 AM GMT+9
https://webkit.org/build-archives/#mac-ventura-x86_64%20arm64
Comment 2 Karl Dubost 2023-06-21 19:49:14 PDT
ha sorry, you need to scroll. 
Indeed I can reproduce once scrolling.
Comment 3 Karl Dubost 2023-06-21 19:50:03 PDT
Created attachment 466789 [details]
after scrolling rendering in safari, firefox, edge, chrome
Comment 4 Radar WebKit Bug Importer 2023-06-21 19:50:37 PDT
<rdar://problem/111137750>