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

I've spent a few hours on this issue as well. In my case I inserted flexbox in an existing project to make all elements in a row have the same height. All browsers except Safari rendered it correctly, but none of the above answers seemed to fix my problem.

Until I discovered that there still was a Bootstrap clearfix hack being used: (code is from a laravel project, but generic Bootstrap otherwise)

@foreach ($articles as $key => $article)
    @if ($key % 3 === 0)
        

    @endif
    @if ($key % 2 === 0)
        

    @endif

    etc...
@endforeach

Apparently, other browsers than Safari ignore the .clearfix in some way when flexbox is being used.

So, when using flexbox on your columns, there is no need to use Bootstrap's clearfix anymore.