flexbox在safari中不起作用

我已经看到了类似问题的答案，我尝试了解决方案，但没有任何效果。 因此，我有一个图像类别flexbox，每行7个图像，当它调整到移动显示时，每行3个。除了safari之外，所有浏览器都可以正常工作，无论屏幕大小如何，safari都保持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);
    }

  }`

其中框为单元格

可能重复：可能重复：