Bug 312477
| Summary: | Flexbox: calc(infinity) flex-grow factor fails to stretch item to 100% width. | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Nilesh Prajapati <nileshprajapati> |
| Component: | Layout and Rendering | Assignee: | Sammy Gill <sgill26> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | CC: | bfulgham, sgill26, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 26 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 26 | ||
| See Also: | https://github.com/web-platform-tests/wpt/pull/59547 | ||
Nilesh Prajapati
Hi Webkit,
Issue:
When resizing the window to a smaller viewport, the following demo fails to fill the remaining space in Safari.
To illustrate the problem, I recommend adding a red background to the main window.
https://codepen.io/amit_sheen/pen/dPpjEOv/6896f83a17a23d0f92099c3d7ad40b83?editors=1100
Ref: https://frontendmasters.com/blog/building-a-ui-without-breakpoints/
The issue is not present in either Chrome or Firefox and works as expected. It fills the remaining space at a smaller viewport size.
Thanks,
Nilesh
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Alexey Proskuryakov
*** Bug 312476 has been marked as a duplicate of this bug. ***
Nilesh Prajapati
*To illustrate the problem, I recommend adding a red background to the main element.
Radar WebKit Bug Importer
<rdar://problem/175431146>
Sammy Gill
Pull request: https://github.com/WebKit/WebKit/pull/63453
EWS
Committed 311956@main (32309d175884): <https://commits.webkit.org/311956@main>
Reviewed commits have been landed. Closing PR #63453 and removing active labels.
Sammy Gill
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/59547