Question

What is the easiest way to make the parent #container div automatically adjust height when the inner #child contenteditable div exceeds the height of the parent div.

Here’s the example. http://jsfiddle.net/ULUJX/
Try to type inside the #child div until height exceeds the parent div.

Answer 1

I’d track keyup events and watch the height of #child, for example:

var $child = $('#child');

var $container       = $('#container');
var container_height = $container.height();
$container.resizable();

$child.keyup(function() {
    var h = $child.height();
    if(h > container_height) {
        $container.height(h);
        container_height = h;
    }
});

Here’s an updated version of your jsfiddle: http://jsfiddle.net/ambiguous/ULUJX/10/

If you want it to shrink as well then simply change the if and take care with the initial sizes of things.