Flexbox row wrap not working in Safari

Question

using OSX 10.12.4 safari version 10.1 and flex row wrap is not working as expected. I have seen the other questions on here about row wrap not working in safari, but it has not helped me so far.

Here is my html:

 .container { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .header { flex: 1 100%; -webkit-flex: 1 100%; -moz-flex: 1 100%; } .body { flex: 1; -webkit-flex: 1; } 

 <div class="container"> <div class="header"> header </div> <div class="body"> body </div> </div> 

Here is a fiddle example

Answer 1

Do the same in .body as you did in the .header .

 .container { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .container>div { flex: 1; -webkit-flex: 1 100%; /* safari fix */ } 

 <div class="container"> <div class="header"> header </div> <div class="body"> body </div> </div>