title: Button with display: flex does not work in Safari. Causing size and alignment issues
body: <p>I'm having some problem with display: flex in both Safari and iOS Safari.
  Safari has alignment issues and iOS Safari has both alignment and size issues. Is this expected or a valid bug in Safari?</p>
  
  <p>Edit: Also, height in percentage on the child SVG inside the Button does not work either. This works in all other browsers.
  I mane another more advanced example with SVG elements, and I added an anchor to compare to the button. <a href="https://codepen.io/JonWallsten/pen/YQKzXL" rel="noreferrer">More advanced example here</a></p>
  
  <p><a href="https://codepen.io/JonWallsten/pen/VboJEg" rel="noreferrer">My simple example</a></p>
  
  <pre><code>HTML:
  &lt;div class="flex"&gt;
    &lt;div class="col col-1"&gt;
      &lt;button class="sub-col"&gt;
        &lt;span class="span"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="sub-col"&gt;2&lt;/div&gt;
      &lt;div class="sub-col"&gt;3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col col-2"&gt;&lt;/div&gt;
    &lt;div class="col col-3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  CSS:
  .flex {
    display: flex;
    flex-direction: column;
    height: 80vh;
    background: #666666;
    position: fixed;
    width: 100%;
  }
  
  .col {
    display: inherit;
    flex: 1 1 auto;
    background: #ccffcc;
  }
  .col-1 {
    flex: 0 0 10vh;
    background: #ffcccc;
  }
  .col-3 {
    flex: 0 0 10vh;
    background: #ccccff;
  }
  
  .sub-col {
    display: inherit;
    flex: 0 0 25%;
    justify-content: center;
    align-items: center;
  }
  
  .span {
    width: 10px;
    height: 10px;
    background: #ffaaaa;
  }
  </code></pre>
  
  <p><strong>Screenshots:</strong></p>
  
  <p>This is what it should look like, and does in Chrome, FF and Edge (Haven't tested IE)</p>
  
  <p><a href="https://i.stack.imgur.com/7Ekvq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7Ekvq.png" alt="Chome, FF and Edge"></a></p>
  
  <p>This is what it looks like in Safari</p>
  
  <p><a href="https://i.stack.imgur.com/YXIoD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YXIoD.png" alt="Safari Desktop"></a></p>
  
  <p>And this is iOS Safari</p>
  
  <p><a href="https://i.stack.imgur.com/L9IRE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/L9IRE.png" alt="iOS Safari"></a></p>