title: scrollHeight not resetting after programmatically changing content
body: <p>I am trying to learn a few things without jQuery. Here is one of the challenges I'm facing.</p>
  
  <p>I have a fixed <strong>contenteditable</strong> div that when adding text to the div, if the <code>scrollHeight</code> exceeds the <code>clientHeight</code> I shrink the font until content fits the div.</p>
  
  <p>Occasionally I "rebuild" the text which replaces the <code>innerHTML</code> programmatically. Or the user can delete text which <em>should</em> reduce the <code>scrollHeight</code>, but in both cases, the <code>scrollHeight</code> remains the maximum value. I need some way to increase the font size to "fit" the div again. (that ideally isn't super expensive)</p>
  
  <p>Example:</p>
  
  <p>My <code>clientHeight</code> = 142, and the <code>scrollHeight</code> = 158. A loop reduces the font size, until <code>scrollHeight</code> is 142.
  Then, the user deletes a line of text, but the <code>scrollHeight</code> is still 142, no change.</p>
  
  <p>code to reduce/increase height:</p>
  
  <pre><code>    var textBox = document.getElementById('text');
      var current, min = 6, max = 14;
      current = textBox.style.fontSize.substr(0, textBox.style.fontSize.length - 2);
      current = parseInt(current);
      if (textBox.clientHeight &lt; textBox.scrollHeight) {
          while (textBox.clientHeight &lt; textBox.scrollHeight) {
              current--;
              if (current &lt; min) break;
              textBox.style.fontSize = '' + current + 'pt';
          }
      } else if (textBox.clientHeight &gt; textBox.scrollHeight) {
          while (textBox.clientHeight &gt; textBox.scrollHeight) {
              current++;
              if (current &gt; max) break;
              textBox.style.fontSize = '' + current + 'pt';
          }
      }
  </code></pre>
  
  <p>html (incase it matters):</p>
  
  <pre><code>&lt;div id="text" contenteditable="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css (incase it matters):</p>
  
  <pre><code>#text {
      position: relative;
      border: 1px solid blue;
      top: 180px;
      left: 31px;
      width: 300px;
      height: 132px;
      padding: 5px;
      font-family: 'mplantin';
      font-size: 14pt;
      font-weight: 200;
  }
  </code></pre>