Bug 223270

Summary:	Slotted item not filling height of container in Safari
Product:	WebKit	Reporter:	warcon103
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Blocker	CC:	rniwa, simon.fraser, svillar, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	Other
Hardware:	Mac (Intel)
OS:	macOS 10.14

Description warcon103 2021-03-16 12:14:06 PDT

I'm trying to get the slotted item to fill the parents container in Safari. The following works in Chrome, FF, even Edge-Chromium, but not Safari. I only have ability to modify the content and styles of the slotted item and not the slot's container (i.e i can modify .c-name, but not user-card)

https://jsfiddle.net/vhu8x716/

Comment 1 warcon103 2021-03-16 17:27:21 PDT

On additional review, it appears the issue is most associated with the 'flex: auto;' defined in the web-component. Changing this to 'flex: 1 1 100%' resolved the issue, but again this requires making changes to third party webcomponents

Comment 2 Radar WebKit Bug Importer 2021-03-23 12:15:18 PDT

<rdar://problem/75749136>

Comment 3 Ryosuke Niwa 2021-03-23 17:31:56 PDT

Is this bug really dependent on using slot? Or it reproduces anywhere?

Comment 4 warcon103 2021-03-29 12:23:09 PDT

No, looks like its an issue with `flex:auto` in general