<textarea id="auto-resize"></textarea>
#auto-resize {
  overflow: hidden;
  resize: none;
  width: 20em;
  height: 1em;
  min-height: 1em;
  font-size: 1em;
  max-height: 5em;
  padding: 0.5em;
  border-radius: 5px;
}
const textarea = document.querySelector('#auto-resize');
const styles = getComputedStyle(textarea);

const singleLineHeight = parseInt(styles.height, 10);
const paddingTop = parseInt(styles.paddingTop, 10);
const paddingBottom = parseInt(styles.paddingBottom, 10);
const borderTop = parseInt(styles.borderTop, 10);
const borderBottom = parseInt(styles.borderBottom, 10);
const maxHeight = parseInt(styles.maxHeight, 10);

function autoResize() {
  textarea.style.height = `${singleLineHeight}px`;
  textarea.style.overflow = 'hidden';
  
  const scrollHeight = textarea.scrollHeight - paddingTop - paddingBottom - borderTop - borderBottom;
  textarea.style.height = `${scrollHeight}px`;
  
  if (scrollHeight > maxHeight) {
    textarea.style.overflow = 'scroll';
  }
}

function delayedAutoResize() {
  setTimeout(autoResize);
}

textarea.addEventListener('keydown', delayedAutoResize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.