flexbox: distribute elements vertically in Safari
<p>I need to distribute three items in the mobile portrait view. Used <code>flex</code> and it works in all others browsers except safari. so it is not working in iphone.</p>

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

<p><a href="https://jsfiddle.net/afelixj/fby1tno4/" rel="noreferrer">-> Here is the fiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>*{
  -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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
  &lt;div class="col1"&gt;

  &lt;/div&gt;
  &lt;div class="col1"&gt;

  &lt;/div&gt;
  &lt;div class="col1"&gt;

  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>