title: Safari flex-grow behavior different from Chrome/FF/Edge (css flexbox)
body: <p>I'm getting different behavior between Safari and Chrome/FF/Edge using <code>flex-grow</code>. I'm trying to get a vertical center, but safari is giving more of a fixed to bottom effect.</p>
  
  <p>I'm using <code>flex-grow</code> with a decimal, but Safari seems to interpret it as a whole value.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="fc"&gt;
    &lt;div&gt;Align Top&lt;/div&gt;
    &lt;div&gt;Align Center&lt;/div&gt;
    &lt;div&gt;Align Bottom&lt;/div&gt;
    &lt;div class="spacer"&gt;Bottom Spacer&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fc { 
    height: 100%;
    width: 100%;
    background-color: darkBlue;
    color: gold;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  
  .fc div {
    outline: 2px dashed gold;
    padding: 15px;
    width: 200px;
    text-align: center;
  }
  
  .fc div:first-child {
    outline: 1px dashed salmon;
    padding: 15px;
    flex-grow: .5;
    opacity: .5;
  }
  </code></pre>
  
  <p>Here's the pen: <a href="https://codepen.io/dmgig/pen/NvMKJW" rel="nofollow noreferrer">https://codepen.io/dmgig/pen/NvMKJW</a></p>
  
  <p>Problem behavior on Safari 10 (10.12)</p>
  
  <p><a href="https://i.stack.imgur.com/AVKmk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AVKmk.png" alt="Safari 10 on 10.2"></a></p>
  
  <p>Desired behavior on other browsers</p>
  
  <p><a href="https://i.stack.imgur.com/8P3po.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8P3po.png" alt="All other browsers"></a></p>