title: Autosize an SVG?
body: <p>Here is a <a href="http://jsfiddle.net/y59MR/1/" rel="noreferrer">code demo</a></p>
  
  <p>I have a SVG with an unknown height. I can figure it out after I load in json and use javascript+math but is there any css I can use to dynamically size it?</p>
  
  <p>css:</p>
  
  <pre><code>svg {
    width: 500px;
    height: 9000px;
  }
  .tabme {
    border:3px solid red;
    height: 200px;
     overflow:scroll;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="tabme"&gt;
    &lt;div id="Chart"&gt;
      &lt;div class="chartbody" /&gt;
      &lt;svg&gt;
        &lt;rect width="190" y="0" height="16" x="175" /&gt;
        &lt;rect width="190" y="20" height="16" x="175" /&gt;
        &lt;rect width="190" y="40" height="16" x="175" /&gt;
        &lt;rect width="190" y="60" height="16" x="175" /&gt;
        &lt;rect width="190" y="80" height="16" x="175" /&gt;
        &lt;rect width="190" y="100" height="16" x="175" /&gt;
        &lt;rect width="190" y="120" height="16" x="175" /&gt;
        &lt;rect width="190" y="140" height="16" x="175" /&gt;
        &lt;rect width="190" y="160" height="16" x="175" /&gt;
        &lt;rect width="190" y="180" height="16" x="175" /&gt;
        &lt;rect width="190" y="200" height="16" x="175" /&gt;
        &lt;rect width="190" y="220" height="16" x="175" /&gt;
        &lt;rect width="190" y="240" height="16" x="175" /&gt;
        &lt;rect width="190" y="260" height="16" x="175" /&gt;
        &lt;rect width="190" y="280" height="16" x="175" /&gt;
        &lt;rect width="190" y="300" height="16" x="175" /&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>