Flexbox wraps last column of the first row in Safari

Question

The last column of the first row is wrapped to the next line when viewing in Safari, and some other iOS based browsers.

Safari:

Answer 1

.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}

Answer 2

Bootstrap 4 have issues with display: block; property when set either from css or from javascript on the .row class. I figured a solution for this Just create a class as:

.display-block {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

And then apply this class when you want to display the row.

Answer 3

Found this issue trying to do a simple grid using Bootstrap for the TwentyThree CMS, and got the same bug in Safari. Anyway, this solved it for me:

.flex-container:before {
  display: inline;
}

Answer 4

I had the same problem and the answer was that Flex box on safari doesn't seem to like the floats being cleared on the same div that is display: flex.

Answer 5

Explanation

This happens because Safari treats :before and :after pseudo-elements as if they were real elements. E.g. think about a container with 7 items. If container has :before and :after Safari will position the items like this:

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

Solution

As an alternative to the accepted answer I remove :before & :after from flex containers instead of altering the HTML. In your case:

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}

Answer 6

This seems to be a bug in Safari's rendering causing the columns to overflow (and therefore wrap) the Bootstrap container (some kind of Webkit rounding error maybe?). Since you are using Bootstrap, you should be able to achieve the desired result without using flex:

<div class="row">
    <div class="col-md-4 col-sm-6 text-center">
        <div class="product">
            <img src="img.jpg" alt="" class="img-responsive">
            <h3>Name</h3>
            <p>Description</p>
        </div>
    </div>
</div>
<style>
    .product {
        /* this is to automatically center and prevent overflow
           on very narrow viewports */
        display: inline-block;
        max-width: 100%;
    }
</style>

But! Now the problem looking at your example is that you need to keep your product blocks the exact same size or the grid won't keep it's shape. One possible solution is to give .product a fixed height and adjust using media queries.

Here is an example I made that works in Safari and other browsers: http://codepen.io/anon/pen/PZbNMX Additionally, you can use style rules to keep images or description text within a certain size to make things easier to maintain.

Another possible solution is to use a script or jQuery plugin to allow for more dynamic uniform sizing, but I'm not as savvy with that stuff.

I ran into the same issue when trying to combine flex and Bootstrap using Safari, so I hope this helps.