Bug 207486

Summary:	Flex content alignment is displayed differently in Chromium-based browsers and Safari.
Product:	WebKit	Reporter:	Boris Pallares <bpallares0402>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED CONFIGURATION CHANGED
Severity:	Normal	CC:	ahmad.saleem792, ap, bfulgham, jonlee, rniwa, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	BrowserCompat, InRadar
Version:	Safari 13
Hardware:	Mac
OS:	macOS 10.14

Description Boris Pallares 2020-02-10 11:09:00 PST

Browsers where the Issue has been tested:

Safari: 13.0.5
Chrome: 80.0.3987.87
Firefox 72.0.2

What steps will reproduce the problem?
1. Go to https://codepen.io/bpallares/pen/MWwwmJW In both Chrome or Firefox, and Safari
2. Notice how Safari displays the whole content as full width and Chrome doesn't

What is the expected result?

All browsers should match the same styling.


What happens instead?

Safari and Chrome displays different widths. 

https://i.imgur.com/N9PAWlp.png - Chrome, Firefox
https://i.imgur.com/r3oXXno.png - Safari

Comment 1 Radar WebKit Bug Importer 2020-02-11 14:25:42 PST

<rdar://problem/59363763>

Comment 2 Ahmad Saleem 2022-08-29 03:54:38 PDT

I am unable to reproduce this issue in Safari Technology Preview 152 and Safari 15.6.1 using CodePen from Comment 0 and it is showing same as other browsers (Chrome Canary 107 and Firefox Nightly 106), matching intended reference screenshot.

I am going to mark this as "RESOLVED CONFIGURATION CHANGED". Please reopen if you think this is still an issue. Thanks!