kristoferjoseph/flexboxgrid

Content filling on Safari

fostersmix opened this issue · 3 comments

fostersmix commented

Hello! When i using Auto Width:

<div class="row center-xs center-sm center-md center-lg"> 
      <div class="col-xs col-sm col-md col-lg">
        <div class="box top bottom">1</div>
      </div>
      <div class="col-xs col-sm col-md col-lg">
        <div class="box top bottom">2</div>
      </div>
</div>

In Chrome, Firefox, Vivaldi and android devices, all ok - content is transferred as filling:
screenshot at 15 15-23-31

But in Safari (om MacOS), displayed content in one row and add horizontal scroll:
screenshot at 15 15-27-25

How can I fix it?

Rosenblad commented

I'm guessing it's related to either the flex-wrap or flex-shrink/basis/grow. I'm pretty sure I've made a fix for this in a private fork but can't remember what the issue was from the top of my head. Could you maybe provide a link to your source code?

Rosenblad commented

Solved by putting flex-basis: auto; on col-lg. 11. Flexbugs.