title: SVG Fill Width to Child Elements
body: <p>I'd like my container SVG element to scale in order to fit its child group elements or for it to present scrollbars on overflow. I was wondering if there was a css property in order to do so.</p>
  
  <p>E.g. If the markup looks like the following:</p>
  
  <pre><code>&lt;div class="wrapper" style="width:500px; overflow-x:scroll;"&gt;
     &lt;svg class="main"&gt;
        &lt;g width="1000"&gt;&lt;/g&gt;
     &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How might I get the svg's width to fill to '1000' or present scrollbars if child elements exceed its width? </p>
  
  <p>The following css has no effect on the above:</p>
  
  <pre><code>.main {
      width: 500px; // Setting to 100% also does nothing
      overflow-x: scroll;
  }
  </code></pre>
  
  <p>I currently achieve the desired effect with javascript by updating the svg container's width as necessary; but this is cumbersome and error-prone, as I'd need to check to make sure that when any new element is added inside svg, that the svg container resizes to fit.</p>
  
  <p>Any help would be much appreciated.</p>