Auto-resize contentEditable

Resize the contentEditable container when text reaches bottom (also Attempting to make text go past bottom of div without scrolling the div).

by Joe Pea

HTML

<div id="edit_container">
    <div id="edit" contentEditable="true">
        <p id="initial_text">
            test
        </p>
    </div>
</div>

CSS

#edit_container {
    overflow:hidden;
    border:solid 1px green;
    height:70px;
    width:300px;
    top: 20px;
    left: 20px;
    position: relative;
}
    #edit {
        overflow:hidden;
        /*border:solid 1px red;*/
        height:50px;
        width:100%;
        position: absolute;
        top: 0px;
        left: 0px;
        line-height: 1em;
        font-size: 18px;
    }
        #initial_text {
        }

JavaScript

$(document).ready(function() {

    $("#edit").on('keyup', function() {
        //$this = $(this);
        //$this.scrollTop(0);
        
        var contentOuterHeight = 0;
        var line_height = 18;
        
        $("#edit *").each(function() {
            $this = $(this);
            contentOuterHeight += $this.outerHeight(true);
        });
        
       // if (contentOuterHeight == 0) {
        // when there are no elements, just text, add one line-height
            contentOuterHeight += line_height;
       // }
        $("#edit").height(contentOuterHeight);
        
        $("#edit_container").scrollTop(0);
    });


});