Bug 223270 - Slotted item not filling height of container in Safari
Summary: Slotted item not filling height of container in Safari
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: Mac (Intel) macOS 10.14
: P2 Blocker
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-03-16 12:14 PDT by warcon103
Modified: 2021-03-29 12:23 PDT (History)
5 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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