Flexbox still spotted in Safari, flex-wrap not working

Question

I looked at forums that were looking for the answer to this question, but so far nothing has worked. I am using CSS3 style flexbox for footer on my website. HTML is as follows:

<footer class="footer" role="contentinfo"> <!-- copyright --> <div id="box1" class="box"> <a class="btn" id="btn-donate" href="#">Donate</a> <a class="btn" id="btn-news" href="#">Get News</a> </div> <div id="box2" class="box"> <h2>Quill Theatre</h2> <p>PO Box 7265<br> Richmond, VA 23221</p> <p> [e-mail] <br> 804.340.0115</p> <span>Social goes here</span> </div> <div id="box3" class="box">3</div> <!-- /copyright --> </footer> 

And my CSS looks like this: its a bit dirty bc. I am trying to work with a bunch of:

 .footer { display: flex; display: -webkit-flex; -webkit-flex-direction: row; flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; -webkit-flex-flow: row wrap; width: 100%; } .footer .box { order: 1; min-width: 50%; flex: 1 1 auto; -webkit-flex: 1 1 auto; flex-shrink: 1; flex-basis: auto; -webkit-flex-shrink: 1; -webkit-flex-basis: auto; } .footer #box2 { order: 0; min-width: 100%; flex: 2 2 auto; -webkit-flex: 2 2 auto; -ms-flex: 2 2 auto; text-align: center; border-top: 3px solid black; border-bottom: 3px solid black; padding-bottom: 2em; } .footer #box2 h2 { text-transform: uppercase; } 

This works fine in every browser except Safari - the wrapper does not happen. What am I missing here, what does the wrap not allow?

Answer 1

Just for someone who wonders:

I had a way too many prefix that Safari webkit came out on. I was able to solve this problem using the correct flexbox rules (for example, using flex as a shorthand and not declaring flex-grow or flex-shrink) and using Autoprefixer to handle the vendor prefix.

Answer 2

For those who are experiencing a similar problem.

My flexible inline list layout worked fine on Chrome, but the wrapper didn't work on Safari.

I had min-width: 25% on li s. As soon as I deleted it, it displayed correctly in Safari.