flexbox: distribute elements vertically in Safari

Question

I need to distribute three items in the mobile portrait view. Used flex and it works in all others browsers except safari. so it is not working in iphone.

I have used align-content: space-between; and flex-flow: row wrap; together to get the alignment. What are the correct properties to be used to make it work in Safari?

-> Here is the fiddle

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body{
  height: 100%;
  margin: 0;
}
.wrap{
  display: -webkit-box;display: -ms-flexbox;display: flex;
  -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
  -ms-flex-line-pack: justify;align-content: space-between;
  width: 100%;
  border: 1px solid red;
  height: 100%;
  
  -webkit-flex-flow: row wrap;
   flex-flow: row wrap;

}
div[class*="col"]{
  height: 50px;
  width: 100%;
  border: 1px solid green;
}

<div class="wrap">
  <div class="col1">

  </div>
  <div class="col1">

  </div>
  <div class="col1">

  </div>
</div>

Answer 1

Your code is missing the necessary -webkit- prefixes for older Safari versions:

display: -webkit-flex;
display: flex;

-webkit-flex-direction: column;
flex-direction: column;

-webkit-align-content: space-between;
align-content: space-between;

-webkit-flex-flow: row wrap;
flex-flow: row wrap;

References:

• http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
• http://caniuse.com/#search=flexbox (click "Show all")
• https://stackoverflow.com/a/35137869/3597276