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: RESOLVED DUPLICATE    
Severity: Normal CC: ahmad.saleem792, fantasai.bugs, karlcow, sgill26, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: Mac (Intel)   
OS: macOS 13   
Bug Depends on:    
Bug Blocks: 292022    
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

Lennard Scheibel
Reported 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.
Attachments
Minimal reproduction showing the bug. Red area is not visible when opened in Chrome or FF. (218 bytes, text/html)
2023-06-21 07:00 PDT, Lennard Scheibel 		no flags
Details
rendering in safari, firefox, edge, chrome (283.46 KB, image/png)
2023-06-21 19:48 PDT, Karl Dubost 		no flags
Details
after scrolling rendering in safari, firefox, edge, chrome (274.21 KB, image/png)
2023-06-21 19:50 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 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
Karl Dubost
Comment 2 2023-06-21 19:49:14 PDT
ha sorry, you need to scroll. Indeed I can reproduce once scrolling.
Karl Dubost
Comment 3 2023-06-21 19:50:03 PDT
Created attachment 466789 [details] after scrolling rendering in safari, firefox, edge, chrome
Radar WebKit Bug Importer
Comment 4 2023-06-21 19:50:37 PDT
<rdar://problem/111137750>
fantasai
Comment 5 2025-10-24 10:26:32 PDT
I believe this is fixed in https://github.com/WebKit/WebKit/pull/52498
Ahmad Saleem
Comment 6 2025-10-24 10:41:01 PDT
Yes - I can confirm, it is now fixed on WebKit ToT (302095@main).
Karl Dubost
Comment 7 2025-10-26 23:15:04 PDT
*** This bug has been marked as a duplicate of bug 218579 ***
Note You need to log in before you can comment on or make changes to this bug.