title: scrollWidth/scrollHeight give invalid dimensions
body: <p>As stated at <a href="https://developer.mozilla.org/en/Determining_the_dimensions_of_elements" rel="nofollow">https://developer.mozilla.org/en/Determining_the_dimensions_of_elements</a>:</p>
  
  <blockquote>
    <p>If you need to know the actual size of the content, regardless of how
    much of it is currently visible, you need to use the scrollWidth and
    scrollHeight properties.</p>
  </blockquote>
  
  <p>So, I am using the scrollWidth and scrollHeight properties to resize the element to its actual size (<a href="http://jsfiddle.net/eagf7/" rel="nofollow">jsfiddle</a>).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;textarea&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.&lt;/textarea&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>(function ($) {
      $(document).ready(function () {
          $('textarea').css({ 
              width: $('textarea')[0].scrollWidth, 
              height: $('textarea')[0].scrollHeight 
          });
      });
  })(jQuery);
  </code></pre>
  
  <p>I would assume that if I set the dimensions to the actual size of the content the element would have no scrollbars as its dimensions would be large enough for the content to not overflow. Right? So it should be the way you see in this image: i.stack.imgur.com/lKxoz.png</p>
  
  <p>But it doesn't work properly as you can see from the following images:</p>
  
  <p><strong>IE</strong>: i.stack.imgur.com/JXt0e.png</p>
  
  <p><strong>Chrome</strong>: i.stack.imgur.com/emGyG.png</p>
  
  <p><strong>Opera</strong>: i.stack.imgur.com/7MAX5.png</p>
  
  <p>My question is <strong>what is wrong with the scrollWidth and scrollHeight properties?</strong> They give me invalid dimensions!</p>