title: Button height with display flex is not uniform in Safari
body: <p>I have a <code>button</code> encapsulated under the <code>div</code> with the following structure:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div class="parent-container"&gt;
        &lt;div class="child child-1 col-xs-6"&gt;
          &lt;button class="btn btn-primary"&gt;Customize Feed&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="child child-2 col-xs-6"&gt;
          &lt;button class="btn btn-default"&gt;Really Really Really Really Really Really Long CTA text&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    .parent-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
  
      .child-1 {
        order: 2;
      }
  
      .child-2 {
        order: 1;
      }
  
      .child button {
        height: 100%;
        white-space: normal;
      }
  
      .child button {
        width: 100%;
      }
  </code></pre>
  
  <p>The two buttons (both with long text and shorter text), should occupy the same height irrespective of their content's length. It works well across all the browsers <strong>except</strong> for Safari in macOS.</p>
  
  <p><a href="https://jsfiddle.net/qe4kmd05/" rel="nofollow noreferrer"><strong>Demo</strong></a></p>
  
  <p><strong>Issue Screenshot</strong> <em>(from the demo)</em>: </p>
  
  <p><a href="https://i.stack.imgur.com/KvMH6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KvMH6.png" alt="*The buttons improper height*"></a></p>