Bug 188252 - Flexbox auto width flex container wraps when not necessary
Summary: Flexbox auto width flex container wraps when not necessary
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 11
Hardware: Unspecified macOS 10.13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-08-01 23:18 PDT by Roland Soos
Modified: 2020-08-18 10:12 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Roland Soos 2018-08-01 23:18:53 PDT
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;
Comment 1 Radar WebKit Bug Importer 2018-08-22 01:46:15 PDT
<rdar://problem/43597279>
Comment 2 Stephen Demjanenko 2020-08-18 10:12:27 PDT
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?