Css 如何在safari中使用flex？

我尝试在safari中使用flex，但在使用时遇到问题 flex 0 0 20%与其他flex容器位于同一行-safari始终向我显示5个元素，但不显示换行/

<style>
html {
  width: 800px;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}
.brand {
  display: flex;
  width: 100%;
}
.brand-info {
  flex: 1;
}
.brand-list {
  flex:2;
  max-width: 100%;
}
.brand-list-items {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.brand-list-items img {
  flex: 0 0 20%;
}

</style>

   <div class="brand">
  <div class="brand-info">
    base info 
  </div>
    <div class="brand-list">
      <div class="brand-list-items">
         <img src="https://placehold.it/300" alt="">
         <img src="https://placehold.it/300" alt="">        
         <img src="https://placehold.it/300" alt="">        
         <img src="https://placehold.it/300" alt="">        
         <img src="https://placehold.it/300" alt="">        
      </div>
    </div>
</div>

html{
宽度：800px；
}
*，*：之前，*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.品牌{
显示器：flex；
宽度：100%；
}
.品牌信息{
弹性：1；
}
.品牌清单{
弹性：2；
最大宽度：100%；
}
.品牌清单项目{
显示器：flex；
柔性包装：包装；
最大宽度：100%；
}
.品牌列表项目img{
弹性：0.20%；
}
基本信息

---

这是safari中的一个bug，尽管它已在最新版本中修复，以便将旧版本更改为

。品牌列表项目img{
弹性：0.10em；
}