让父div的宽度等于最宽的子元素/ div(Getting Parent div's width to equal widest Child element/div)

 据我所知，如果未定义div的宽度和高度属性，则父div将等于排列的子元素宽度和高度属性的结果（统称分别）。 
 
 我目前的设置是这样的： 
 
<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>
 
 我的问题是元素div的width s没有正确设置（或更新）。 div的宽度应该是子SVG的宽度（因为它是最宽的），div的高度应该是子div的高度（其中2个）和SVG的高度。 
 
 这是这个例子的小提琴 。 您会注意到栏示例正在被切断。 这个div的计算宽度是300，尽管它的SVG更大（拖动以查看剩余部分） 
 
 JQ-UI正在发挥作用，因此在用户操纵表示的大小后，其他人将重新渲染自己。 如果我们可以找出为什么div渲染到300px，那么它也将修复重新渲染，因为它将基于其子元素。 
 
 似乎问题也可能出在SVG本身。 我还没有在SVG上定义宽度和高度属性，而是在CSS上这样做了。 如果我在调整大小时操纵SVG宽度属性，它似乎可能有效，但我仍然不清楚为什么SVG的宽度不计算然后适合div。 

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 widths 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.

原文：https://stackoverflow.com/questions/18494367