search

kristoferjoseph / flexboxgrid

Grid based on CSS3 flexbox
http://flexboxgrid.com
Other
9.38k stars 1.15k forks source link

Content filling on Safari #233

Open fostersmix opened 7 years ago

fostersmix commented 7 years ago

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 7 years ago

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?

fostersmix commented 7 years ago

Source code on page: http://fostersmix.github.io/

Rosenblad commented 7 years ago

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