0

My flexbox not working properly on safary , all boxes are shrinked one to each other. I tested on windows safari version 5.1.7

http://prntscr.com/dyiitd

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;
  }
1
  • I think the user statistics on Safari for Windows is 0%, so I recommend to not use that for testing
    – Asons
    Jan 21, 2017 at 17:42

1 Answer 1

1

windows safari version 5.1.7 not support flex.

if you test your website in mac safari, it will be fine.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.