title: Flexbox, image bigger than div shrinks in safari but not in chrome
body: <p><a href="https://jsfiddle.net/MR_Coder/uo91um49/" rel="nofollow">https://jsfiddle.net/MR_Coder/uo91um49/</a></p>
  
  <p>In Safari once the browser starts to squish the image, the image starts to shrink.</p>
  
  <p>What I want is the behavior in Chrome, the browser shrinks but the image stays at the same size.</p>
  
  <p>Could someone test this in chrome and in safari to see what I mean?</p>
  
  <p>HTML:
      
      
      </p>
  
  <pre><code>&lt;div class="expand"&gt;
  &lt;img src="#" alt="driving me nuts"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.expand
   {
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: red;
   }
  </code></pre>
  
  <p>I apologize for that weird code. First time posting, won't let me post without code if I have a jsfiddle link.</p>