title: SVG with viewBox and width is not scaling height correctly in IE
body: <p>I'm trying to construct inline SVGs with viewBox attributes, but no explicit width or height attributes. I'm setting the SVG's width to 100% using CSS. This should let the SVG scale to its wrapping container, maintaining the aspect ratio set up by the viewBox.  In Chrome and Firefox, this works perfectly!</p>
  
  <p>Here's a minimal codepen example of what I'm talking about:
  <a href="http://codepen.io/pcorey/pen/amkGl">http://codepen.io/pcorey/pen/amkGl</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;svg viewBox="0 0 100 10"&gt;
      &lt;text x="1" y="9"&gt;hello&lt;/text&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
    width: 400px;
  }
  
  svg {
    width: 100%;
    max-height: 100%;
    outline: 1px solid tomato;
  }
  
  text {
    font-size: 10px;
  }
  </code></pre>
  
  <p>The viewBox is 100x10. The outer div is set to have a 400px width. That means that the SVG's height should be (and is in Chrome/Firefox) 40px. BUT, in IE 11, the width is ALWAYS 150px (even when the div's width exceeds 1500px...)</p>
  
  <p>Is there a nice way to fix this in IE? Why can't IE handle the unknown height correctly? I can use the "<a href="http://alistapart.com/article/creating-intrinsic-ratios-for-video/">intrinsic aspect ratio</a>" trick, but that is super ugly, requires another DOM element, and requires that I recompute the padding-top every time the wrapper resizes.</p>
  
  <p>For more info on why I want to do this, I wrote a quick blog post about it: <a href="http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/">http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/</a></p>
  
  <p>Thanks for the help!</p>