Scrollwidth/scrollheight Give Invalid Dimensions

As stated at https://developer.mozilla.org/en/Determining_the_dimensions_of_elements: If you need to know the actual size of the content, regardless of how much of it is current

Solution 1:

The problem is that you're not including the size of the scrollbars. Try setting "overflow" to "hidden" or adding the size of the scrollbars and it works. There are ways to calculate that size, Google will help you. For testing purposes use Chrome on Windows and 17px. Depending on the context you're using this snippet you might need to reset the size whenever the content changes. You should also give the textarea a fixed width, else the browser will assign whatever it feels like.

(function ($) {
    $(document).ready(function () {
        $('textarea').css({
            width: $('textarea')[0].scrollWidth+'px',
            height: $('textarea')[0].scrollHeight+'px',
            overflow: 'hidden'
        });
    });
})(jQuery);

Solution 2:

I feel You took it very complex! There is an scrollHeight and and scrollWidth property that equals to width and height of what is inside an scrollable element. So setting height and width of that element to scrollWidth and scrollHeight can solve the problem.

var textarea = document.getElementsByTagName('textarea')[0];
textarea.style.height = textarea.scrollHeight + 'px';
textarea.style.width = texyarea.scrollWidth + 'px';

Look at fiddle here