Have you ever been filling out a web form that used single-line text input fields for input that far exceeds the length of the field? You have to scroll from end to end to verify what's actually been typed. A textarea field would be far more suitable but even that is clunky with it's fixed size - still requiring scrolling. I've found a few solutions around the web to make a textarea resize itself based on the contents and I've distilled them all down to the following very easy steps:

1. Add the CSS that makes the "autoresize" class (you can name it anything you want):

<style>
.autoresize{
    resize: none;
    overflow-y: hidden;
    overflow-x: hidden;
}
</style>

resize:none: hides the resizing handle from the textarea
overflow-y: hidden: prevents the textarea from showing scrollbars when the content overflows or reaches the horizontal boundary of the input
overflow-x: hidden: fixes a little feature in Firefox that adds an additional line at the end of the textarea content when there is only one line.

1. Add the function to make the element size change relative to its content

<script>
function autoResize(elem) {
    elem.style.height = 'auto';
    elem.style.height = (elem.scrollHeight-4) + 'px';
}
</script>

elem.style.height = 'auto': this resets the size of the textarea element (passed in as 'elem') just before setting it to the size content based size, without this the textarea will increase the size automatically, but it will not decrease the size once it has been increased.
elem.style.height = (elem.scrollHeight-4) + 'px': this sets the textarea to the size of the 'scrollHeight' of the element - this is the size the textarea would be based on the size of the content and also adds the padding for the element (4px). The 4px is subtracted back out or the end result would be cumulative and would increase by 4 additional pixes with every resize.

1. Create the textarea element and add the CSS class created above:

<textarea class="autoresize" oninput="autoResize(this)" rows="1"></textarea>

Add the "oninput" event listener and point it to the "autoResize" function passing in "this" for the function argument (in this case "this" refers to the textarea element itself). This fires the function for resizing on every keystroke of text input into the textarea element. When the scrollHeight of the element changes because the line would wrap, the autoResize function increases the height of the textarea element. The same happens in reverse when removing characters, making the textarea element resize down when a line break is no longer part of the current line.

If you add an event listener that captures the "Enter" key and map that to submit the form your textarea is contained by, the autoresize textarea can function just like a text input form element, without scrolling off the edge of the input field.

That's it. I've tried to make it as streamlined as possible. Let me know if you know of other alternative solutions. This one works for me but there may be other ways.