title: SVG image not rendering properly in IE11 / Edge unless container has fixed width
body: <p>Both Edge and Internet Explorer 11 seem to <em>scale</em> SVG images rather differently than regular raster images.</p>
  
  <p>Take a look at the following example:</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-flow: row nowrap;
  }
  
  .box {
    flex: 0 1 auto;
    background: red;
  }
  
  .fill {
    flex: 1 0 auto;
    background: green;
  }
  
  .box img {
    display: block;
    width: auto;
    height: 150px;
    background: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="box"&gt;
      &lt;img src="http://s33.postimg.org/hbl2jy69b/logo_light.png" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="fill"&gt;fill&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;div class="box"&gt;
      &lt;img src="http://imgh.us/logo-light_1.svg" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="fill"&gt;fill&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Both images are identical, the first is a PNG, the other is an SVG. Both images reside in a <code>.box</code> which is set to <code>flex-shrink</code> but not <code>flex-grow</code>. Next to the box is a <code>.fill</code> which is set to <code>flex-grow</code>, but not <code>flex-shrink</code>.</p>
  
  <p>So, the idea is really simple. We set each image's height to some fixed value, the width gets calculated automatically keeping the aspect ratio of the image, which respectfully sets the width of the <code>.box</code> container. <code>.fill</code> occupies the rest of the available space.</p>
  
  <p>The example works just fine both in Chrome and Firefox, and two identical images are being displayed:</p>
  
  <p><a href="https://i.stack.imgur.com/rEtpw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rEtpw.png" alt="enter image description here"></a></p>
  
  <p>In Edge however, the image is cropped:</p>
  
  <p><a href="https://i.stack.imgur.com/9NFnL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9NFnL.png" alt="enter image description here"></a></p>
  
  <p>Where in IE it's even weirder:</p>
  
  <p><a href="https://i.stack.imgur.com/7s5F0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7s5F0.png" alt="enter image description here"></a></p>
  
  <p>You can view the source of the SVG here: <a href="http://imgh.us/logo-light_1.svg" rel="nofollow noreferrer">http://imgh.us/logo-light_1.svg</a></p>
  
  <p>I've also tried a couple of different values for the <code>preserveAspectRatio</code> attribute of the SVG all with different results, but still not the one I'm actually looking for.</p>
  
  <p>Am I missing something? Is this just a matter of a proper <code>preserveAspectRatio</code> attribute or is it a bug?</p>