-1

i try to use flex in safari - but have problem when use flex 0 0 20% in same row with other flex container - safari always shows me 5 elements but no wrap / 

<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/

marcin
  • 150
  • 1
  • 9

1 Answers1

0

This is a bug in safari although it has been fixed in the latest version for older versions change to.

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

Alex Waddelove
  • 16