flexbox在safari中不起作用

Question

我已经看到与我的类似问题的答案尝试了解决方案，没有任何效果。 所以我有一个图像类别flexbox每行7个图像，当它调整到移动显示，它每行3。除了屏幕尺寸

之外，所有浏览器中的一切都能正常工作

这是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);
    }

  }`

其中box是单元格