I'm adding text to a textarea that has been modified using the jQuery.UI resizable plug-in, after which I resize the textarea's hight by setting it to  the textarea's scrollHeight, but since the parent div, added by the resizable plug-in has a fixed size, the textarea gets cut-off when the textarea height is now taller than the parent div's height.

I tried to fix this by assigning 'auto' to the div's height, but something is preventing my assignment.  I also tried 'auto !imporant', but this didn't work, either.

How can I change the parent div's height to automatically expand to its contents?

This is what I tried:

   $( function() {
     $textarea.resizable();
     $textarea.parent().css( 'height', 'auto' );
   } );

Thank you.