0

CSS3 Flexbox row wrap is not working in iOS version 8.3 only. As per the suggestion on the link, I have updated my code. But still, it is not wrapping as expected.

`

.case-study-list {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        padding: 0 0 30px;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        .case-study-item {
            list-style-type: none;
            min-width: 180px;
            padding: 30px 20px 0;
            -webkit-flex: 1 1 180px;
            -ms-flex: 1 1 180px;
            flex: 1 1 180px;
   }
}

` section won't wrap as expected and appears similar to the image Please find the link to my fiddle. I'm really stuck with this. Any help is much appreciated.

Elizabeth Mathew
  • 418
  • 3
  • 11

1 Answers1

6

Seems you missed to add prefix on display property. Safari 9 supports all standard flex properties, with Safari 8 and older you'll need to use vendor prefixes. 

.case-study-list {
    display: -webkit-flex;
    display: flex; 
}

Here are some link's that might help you CSS Autoprefixer FLEXBOX CHEAT SHEET

Ram Chandra Neupane
  • 1,826
  • 3
  • 19
  • 36