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 | ||
warcon103
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/
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
warcon103
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
Radar WebKit Bug Importer
<rdar://problem/75749136>
Ryosuke Niwa
Is this bug really dependent on using slot? Or it reproduces anywhere?
warcon103
No, looks like its an issue with `flex:auto` in general