如何在 safari 中使用 flex？

Question

我尝试在 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>

https://jsfiddle.net/betasap/r3hm86zq/

Answer 1

这是 safari 中的一个错误，尽管它已在最新版本中修复，旧版本更改为。

.brand-list-items img { flex: 0 0 10em; }