To my understanding, if a div's width and height properties are not defined, the Parent div will equal the result of the arranged children elements width and height properties added collectively (and respectively).
My current set up is like so:
<div> //container
<div> //list of each element
<div> // element 1
... children comprised of on SVG and a few other divs
</div>
<div> // element 2
... children comprised of on SVG and a few other divs
</div>
<div> // element 3
... children comprised of on SVG and a few other divs
</div>
…etc…
</div>
</div>
My problem is that the width
s of the element divs are not getting set (or updated) correctly. The width of the div should be the width of the child SVG (as it is the widest), and the height of the div should be the height of the child divs (2 of them) and the height of the SVG.
Here is the fiddle of the example. You will notice that the bar example is being cut off. This div's computed width is 300, despite its SVG is larger (drag to see the remaining portion)
JQ-UI is in play, so after a user manipulates the size of on representation, the others will re-render themselves. If we can figure out why the div is rendering to 300px, then it will also fix the re-rendering, since it will be based on its children elements.
It appears that the issue might also be with the SVGs themselves. I have not defined the width and height properties on the SVG, rather I did so on the CSS. If I manipulate the SVG width propertuy on resize, it appears to potentially work, but I am still uynsure of why the SVG's width is not calcualated and then fit into the div.