javascript - 親divの幅を最も広い子要素/divに等しくする

Question

私の理解では、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>

私の問題はwidth、要素 div の s が正しく設定 (または更新) されていないことです。div の幅は、子 SVG の幅 (最も広いため) である必要があり、div の高さは、子 div (2 つ) の高さと SVG の高さである必要があります。

これが例のフィドルです。バーの例が切り取られていることに気付くでしょう。SVG の方が大きいにもかかわらず、この div の計算された幅は 300 です (残りの部分を表示するにはドラッグします)

JQ-UI が機能しているため、ユーザーが表現上のサイズを操作した後、他のユーザーは自分自身を再レンダリングします。div が 300px にレンダリングされている理由を突き止めることができれば、子要素に基づいているため、再レンダリングも修正されます。

問題は SVG 自体にもあるようです。SVG では幅と高さのプロパティを定義していませんが、CSS では定義しています。サイズ変更時にSVG幅プロパティを操作すると、うまくいく可能性がありますが、SVGの幅が計算されずにdivに収まる理由がまだわかりません。