Bug 188252
| Summary: | Flexbox auto width flex container wraps when not necessary | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Roland Soos <roland> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, jonlee, sdemjanenko, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 11 | ||
| Hardware: | Unspecified | ||
| OS: | macOS 10.13 | ||
Roland Soos
I have a complicated flexbox layout where menu items are columns and aligned to the right in an auto width flexbox container. Also This container allow the items to wrap when there is not enough width available.
You can check the issue here: https://smartslider3.com/bugs/webkit/flexwrap/
Safari 11.1.2 and Tech preview Release 61 (Safari 12.0, WebKit 13606.1.25.1): https://i.imgur.com/xnrQyGE.png
Chrome and other browsers: https://i.imgur.com/bDVDk7j.png
I tried to compose the issue in JSFiddle, but I have no luck, it seems fine in Safari too: http://jsfiddle.net/j3Lau0td/1/
I think the issue is somehow related to value rounding.
In the original example if you check .n2-ss-layer-row-inner element, which has the following CSS:
width: calc(100% + 30px);
margin: -15px;
You just need to change that to and it seems OK in Safari too.
width: calc(100% + 31px);
margin: -15px;
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/43597279>
Stephen Demjanenko
I believe this bug is also causing an issue when using nested Grid component's in Material-UI: https://github.com/mui-org/material-ui/issues/17142
Is there any priority to address this bug?