flexbox does not work in safari

Question

i already see the answers to similar problems with mine tried the solutions and nothing worked. so i have an image categories flexbox with 7 images per row when it resizes to mobile display it goes to 3 per row. everything works fine in all browsers except safari that sticks to 3 in row no matter the screen size

here is the css:

`.wrapper {
display: -webkit-box;
display: -webkit-flex;
    display: -ms-flexbox;
     display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  margin-top: 50px;
   margin-bottom: 30px;
}
.responsive-image {
  max-width: 100%;
}
.responsive-images {
  max-width: 100%;
}
.box img {
      display: block;
      -webkit-flex: 1;
   -ms-flex: 1; 
  flex: 1
}
.box {
    max-width: calc(100% / 7);
    border: 4px solid white;
    height: 100%;
}`

`@media screen and (max-width: 700px) {
    .box {
        max-width: calc(100% / 3);
    }

  }`

where box is the cell