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 didn't want to add more classes to fix this kind of bug, so alternatively you can fix the .row class itself.

.row {
    &:before {
        content: none;
    }

    &:after {
        content: '';
    }
} 

Answer 2

I know the issue is quite old, but I ran into this issue today, and wasted over 12 hours in fixing it. Though about 10 hours out of that were spent in realizing that safari is failing with 12-column bootstrap grid, and it is no other issue.

Fix that I made is rather simple. Here is the version for Visual Composer. Class names may vary for other frameworks.

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}

Answer 3

Just to update on my question

This is the solution I go with, this is obviously fixed for Bootstrap4, which is flexbox compatible. So this is only for bootstrap3.

.row.flexthis:after, .row.flexthis:before{
  display: none;
}

Answer 4

I was able to fix it by adding

.row:before, .row:after {
display: flex !important;
}

Obviously this isn't the most elegant solution but it may work for some in the meantime until they fix it.

Answer 5

In case you are using display flex with flex-wrap i solved it applying a hight order to the before and after pseudo-elements of the row, so they position as the last elements.

.row.flex_class {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.row.flex_class::before, .row.flex_class::after {
    order: 10;
}

Answer 6

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)
        <div class="clearfix hidden-xs hidden-sm"></div>
    @endif
    @if ($key % 2 === 0)
        <div class="clearfix hidden-lg hidden-md"></div>
    @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.