2

I'm using display: flexbox for a div container cointaining a number of squares (to make them align nicely horizontally), and it works fine in Chrome, but not in Safari 8.0, where it's striked out like this:

enter image description here

#grid {
    overflow-x: hidden;
    overflow-y: scroll;

    position: absolute;
    top: 55px;
    left: 415px;
    bottom: 10px;
    right: 10px;

    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

.square {
    width: 166px;
    height: 185px;
    position: relative;
    cursor: pointer;
    background-size: 166px 125px !important;
    background-repeat: no-repeat !important;
    background: #FFF;
    margin-right: 20px;
    float: left;
}
Simon Fredsted
  • 964
  • 2
  • 14
  • 26

1 Answers1

3

You need use prefix so does safari supports

#grid {
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 55px;
    left: 415px;
    bottom: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
}
Benjamin
  • 2,612
  • 2
  • 20
  • 32
  • A year and a half later and modern Safari is supposed to be working without prefixes, but there are still some issues. Here's a newer answer with updated info: http://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why/35137869 – TecBrat Jun 15 '16 at 06:35