title: Determine maximum width a DOM element might grow to be?
body: <p>I'm interested in querying the maximum size that a DOM element in a browser might grow to be.  It is well known that an empty DOM element (without styling) has .clientWidth of 0, but adding text/images/etc. to the element might cause its width to grow.  Take for instance the DOM element <code>thisOne</code> in the structure below:</p>
  <pre><code>&lt;table style=&quot;padding: 20px; border-spacing: 100px&quot;&gt;
     &lt;tr&gt;
         &lt;td&gt;&lt;/td&gt;
         &lt;td&gt;
              &lt;div id=&quot;thisOne&quot;&gt;&lt;/div&gt;
         &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>Currently <code>#thisOne.clientWidth === 0</code> but if I append a large amount of text to it, its width will grow and grow, but not until it reaches <code>document.body.clientWidth</code> because of the columns, padding classes, etc.  I am wondering how I can figure out the current maximum width of the object without doing something like:</p>
  <pre><code>const thisOne = document.getElementById('thisOne');
  thisOne.style.visibility = 'hidden';  // do not display to user.
  thisOne.innerHTML = 'blah '.repeat(2000);
  const maxWidth = thisOne.clientWidth;
  thisOne.innerHTML = '';
  thisOne.style.visibility = 'visible';
  </code></pre>
  <p>JQuery based answers are fine, though knowing a pure HTML/JS version would be better.</p>
  <p>(In case anyone's wondering, I'm planning on placing an SVG of music notation into the div, but I want it to have nice wrapping onto additional lines by giving the renderer a width to fit before adding it)</p>