Reasoning

The issue arises because Safari interprets :before and :after pseudo-elements as actual elements, affecting the layout. For example, consider a container with 7 items. When incorporating :before and :after, Safari arranges the items in the following manner:

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

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

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

Resolution

In contrast to the solution proposed earlier, I opt to eliminate :before & :after from flex containers rather than modifying the HTML structure directly. In this case, execute the following code:

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // `initial` not supported by IE
}

Although this problem has been around for a while, I came across it today and ended up spending more than 12 hours trying to resolve it. It took me about 10 hours to realize that Safari was struggling with the 12-column Bootstrap grid, and no other issue was causing the problem.

The solution I implemented was quite straightforward. Below is the code for Visual Composer, but keep in mind that class names might be different for other frameworks.

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

To address this issue, I decided against adding additional classes and instead opted to make adjustments directly to the .row class.

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

    &:after {
        content: '';
    }
} 

Encountered a problem while attempting to create a basic grid layout using Bootstrap on the TwentyThree CMS, and experienced a similar issue in Safari. However, I was able to resolve it with this solution:

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

After some troubleshooting, I managed to resolve the issue by inserting

.section:before, .section:after {
align-items: center !important;
}

While not the most sophisticated fix, this workaround could be helpful for others until a more permanent solution is implemented.

There seems to be a bug in Bootstrap 4 that causes issues with the display: block; property on the .row class, whether set through CSS or JavaScript. After some troubleshooting, I found a workaround for this problem.

To fix it, simply create a new class:

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

Then, apply this new class whenever you want to display the row correctly.

I have also dedicated a few hours to resolving this issue. I recently integrated flexbox into an existing project in order to ensure all elements within a row have uniform height. Surprisingly, Safari was the only browser that did not display it correctly, and none of the solutions suggested were effective.

It wasn't until I uncovered a lingering Bootstrap clearfix hack in use: (the code is from a Laravel project, but pertains to generic Bootstrap usage)

@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

Evidently, browsers other than Safari do not apply the .clearfix property when flexbox is implemented.

Therefore, when using flexbox for columns, Bootstrap's clearfix is no longer necessary.

It appears that there might be a glitch in Safari's rendering that is causing the columns to exceed their boundaries and wrap outside of the Bootstrap container (possibly due to a Webkit rounding error?). If you are utilizing Bootstrap, it should be possible to achieve the desired layout without resorting to 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 {
        /* Use this code to automatically center and prevent overflow
           on narrow viewports */
        display: inline-block;
        max-width: 100%;
    }
</style>

However, one concern with your current setup is maintaining consistent sizing for your product blocks. You may need to assign a fixed height to .product and make adjustments using media queries to ensure the grid retains its structure.

Here is an example I created that functions smoothly in various browsers, including Safari: http://codepen.io/anon/pen/PZbNMX Furthermore, employing style guidelines can help keep images and text descriptions within specified dimensions for easier maintenance.

Alternatively, exploring scripts or jQuery plugins could offer a more dynamic and uniform sizing solution, although my familiarity with such tools is limited.

I encountered a similar challenge when attempting to blend flex and Bootstrap in Safari, so I trust these suggestions prove beneficial.

Encountering a similar issue, I discovered that Safari has difficulty with floats being cleared within a Flexbox container.

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

If you're utilizing display flex together with flex-wrap, I found a solution by adding a higher order to the before and after pseudo-elements of the row so that they are positioned 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;
}