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;