Expanding Textarea Study

HTML

<section id="section">
    <textarea id="textarea" maxlength="00"></textarea>
</section>

CSS

section {
    background-color: red;
    padding: 6px;
}
textarea {
    display: block;
    resize: none;
    overflow: hidden;
    border: 1px solid transparent;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
}
textarea:focus {
    outline: none;
}

JavaScript

$('#textarea').on('input propertychange', function (e) {
    textArea = e.target;
    console.log(textArea.scrollHeight);
    console.log(textArea.offsetHeight);
    console.log(textArea.rows);
    while (textArea.rows > 1 && textArea.scrollHeight < textArea.offsetHeight) {
        textArea.rows--;
    }
    var h = 0;
    while (textArea.scrollHeight > textArea.offsetHeight && h !== textArea.offsetHeight) {
        h = textArea.offsetHeight;
        textArea.rows++;
    }
});