title: Image stretching in flexbox in Safari
body: <p>This is only an issue in Safari and looks like a Safari bug to me. Here is a <a href="https://jsfiddle.net/0scrgd9j/" rel="noreferrer"><strong>fiddle</strong></a> with a simplified version of the issue.</p>
  
  <p>When an image is in a nested flexbox element with a width set and <code>height: auto</code> it is being stretched... the auto height is not working. Does something extra need to be added for this to work in Safari?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    flex-direction: column;
  }
  
  .container section:first-child {
    display: flex;
    margin-bottom: 25px;
  }
  
  .container img {
    width: 125px;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;section&gt;
      &lt;img src="https://via.placeholder.com/250"&gt;
    &lt;/section&gt;
    &lt;section&gt;
      &lt;img src="https://via.placeholder.com/150"&gt;
    &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect the height of the image to automatically be adjusted to maintain aspect ratio. This works in all browsers except Safari. In Safari the image is stretched and the auto height does not work.</p>