DN. DN. - 5 months ago 151
CSS Question

Flexbox Safari bug (flex-wrap)

I don't know why but Safari always misplaces the elements.

Safari:

enter image description here

Chrome (&others):

enter image description here

Code:

<div class="row flexthis">
<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>
.flexthis{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.flexthis .col-md-4{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
</style>

Answer

I have the same problem with safari only. I have removed the class row from the code and it works fine.

<div class="flexthis">
  <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>
  .flexthis{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .flexthis .col-md-4{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
</style>

Why remove row ? Answer is simple in bootstrap row has some other attributes with it like :after, :before content. So removing row reduces this overhead and allow flex to work properly.