Adapt width of texture to its content

Question

I need to adapt the width of a textarea (='#overlay') to its content. The minimum width should be 100px:

'input #overlay': function(e) {
    var overlay = $('#overlay'),
        element = document.getElementById('overlay'),
        pos     = overlay.position(),
        width   = 100;

    if (element.scrollWidth > element.clientWidth) {
        var diff  = Math.ceil((element.scrollWidth - element.clientWidth)/20)*20,
            left  = pos.left - (diff/2);
            width = element.scrollWidth + diff;

        overlay.css({left: left, width: width});
    }

This code works to expand the textarea if there is a long line. But it can't be used to make it smaller if you delete some characters of the line.

Answer 1

You have to set the minimum value before the if-part:

overlay.css({ width: 100 });

Then the height will always be adapted to the needed height.