title: SVG won't stay inside <div> in Firefox
body: <p>Here's a good one: <a href="http://jsfiddle.net/GeekStocks/9YS8F/" rel="nofollow">jsFiddle</a></p>
  
  <pre><code>body {
      background-color: black;
  }
  #divResearch {
      position: fixed;
      top: calc(((100% - 70px) * .05) + 40px);
      left: 3%;
      width: 94%;
      height: calc((100% - 70px) * .75);
      background-color: darkgreen;
  }
  </code></pre>
  
  <p>If you look at the fiddle above using Chrome 31 (or even IE 11 - can you believe it?!) the SVG graph (gray background) stays inside the container (div with green background) as you <strong>move the Result window resize handles around</strong>.  The SVG has been told to maintain its aspect ratio; you can see excess green in either the width or height depending how you've resized the window.</p>
  
  <p><em>This does not work in FF 26</em>. </p>
  
  <p>In FF 26 as you resize the width the SVG height just keeps getting larger and is never constrained by the div.  Is this a FF bug or poor CSS3 on my part?  This code passes W3C validation (fwiw).</p>