title: Why do images in flexboxes have different heights in different browsers?
body: <p>The following HTML renders very differently on Safari and Chrome:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a style="display:flex;"&gt;
      &lt;img src="https://i.imgur.com/EaWkSxe.png" width=100&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>In Chrome (Version 78.0.3904.70, on Mac), the image aspect ratio is preserved:</p>
  
  <p><img src="https://i.imgur.com/oZep8Za.png" alt="An image demonstrating the aspect ratio is preserved"></p>
  
  <p>In Safari (Version 11.1 (12605.1.33.1.3), on Mac), the image height is preserved:</p>
  
  <p><img src="https://i.imgur.com/7rSbt6H.png" alt="An image demonstrating the height is preserved"></p>
  
  <p>It's fairly easy to make them render the same (just set the height),
  but I do not understand why they are different in the first place.</p>
  
  <p>Why do they render differently?</p>