title: SVG images inside flex div display differently in Safari and Chrome
body: <p>Where Chrome contains the SVG, Safari lets it stretch to a much larger size. Not sure what I can do to get rid of that behavior.</p>
  
  <p>Here's a pen: <a href="https://codepen.io/sashakevich/pen/boEPdb" rel="noreferrer">https://codepen.io/sashakevich/pen/boEPdb</a>
  In Chrome it's perfect, in Safari the images are too large.</p>
  
  <p>And here's the code:</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>* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 30px 10px;
  }
  
  .text-item {
    -ms-flex-preferred-size: 200px;
    flex-basis: 200px;
    margin: 0 1.5%;
  }
  
  .img-item {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
    margin: 0 1.5%;
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    background: #fff;
    border-radius: 3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 25px 35px;
    min-height: 200px;
  }
  
  .img-item img {
    width: 100%;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row" style="background:#f1f1f1;"&gt;
    &lt;div class="text-item"&gt;
      &lt;p&gt;A remake of their old logo of a kid holding a toothbrush.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="img-item"&gt;
      &lt;img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-1.svg"&gt;
    &lt;/div&gt;
    &lt;div class="img-item"&gt;
      &lt;img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-2.svg"&gt;
    &lt;/div&gt;
    &lt;div class="img-item"&gt;
      &lt;img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-3.svg"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row" style="background:#e1e1e1;"&gt;
    &lt;div class="text-item"&gt;
      &lt;p&gt;A remake of their old logo of a kid holding a toothbrush.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="img-item"&gt;
      &lt;img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-3.svg"&gt;
    &lt;/div&gt;
    &lt;div class="img-item"&gt;
      &lt;img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-1.svg"&gt;
    &lt;/div&gt;
    &lt;div class="img-item"&gt;
      &lt;img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-2.svg"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>@Steve-Schrab's flex shrink solution didn't help - <a href="https://stackoverflow.com/questions/31159230/svg-in-flexbox-messes-up-height-of-other-elements">SVG in flexbox messes up height of other elements</a>)
  (Maybe I'm running into the Implied Minimum Size of Flex Items as suggested by @michael_b here: <a href="https://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size">Why doesn&#39;t flex item shrink past content size?</a> but if I am, I don't know what to do to make it behave.</p>