My flexbox not working properly on safary , all boxes are shrinked one to each other. I tested on windows safari version 5.1.7
Here is html code:
<div class="container">
<div class="statistics-box">
<div class="statistics-item">
<span class="value">2,300</span>
<p class="title">Destinations</p>
</div>
<div class="statistics-item">
<span class="value">1,000</span>
<p class="title">Cities</p>
</div>
<div class="statistics-item">
<span class="value">35,000</span>
<p class="title">Boats</p>
</div>
<div class="statistics-item">
<span class="value">50,000</span>
<p class="title">Sailors</p>
</div>
</div>
</div>
Here is css code:
.statistics-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
padding: 20px 10px;
width: 100%;
background: #ffffff;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(52, 52, 52, 0.15);
box-shadow: 0px 0px 30px 0px rgba(52, 52, 52, 0.15);
}
.statistics-box .statistics-item {
flex: 1;
padding: 10px 0;
}
.statistics-box .statistics-item:not(:last-of-type) {
border-right: 1px solid #d4d4d4;
}
fixed by adding:
statistics-box .statistics-item {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 ;
-ms-flex: 1 ;
flex: 1 ;
padding: 10px 0;
}