Увеличение textarea по мере заполняемости - javascript

div { 
  border: 1px solid; 
}

<div contenteditable></div>

var textarea = document.getElementsByTagName('textarea')[0]; 
 
textarea.addEventListener('keydown', resize); 
 
function resize() { 
  var el = this; 
  setTimeout(function() { 
    el.style.cssText = 'height:auto; padding:0'; 
    el.style.cssText = 'height:' + el.scrollHeight + 'px'; 
  }, 1); 
}

textarea { 
  width: 100%; 
  resize: none; 
}

<textarea rows="1"></textarea>

var textarea = document.getElementsByTagName('textarea')[0]; 
/* 
 Чтобы получить необходимы результат и исключить костыльный подход 
   с setTimeout в теле инструкции обработчика resize, его лучше повесить 
   на событие input вместо keydown  
*/	 
		textarea.addEventListener('input', resize); 
		 
		function resize(_e) { 
			var event = _e || event || window.event; 
			var getElement = event.target || event.srcElement;	// var el = this; 
				getElement.style.height = Math.max(getElement.scrollHeight, getElement.offsetHeight)+"px" 
		}

textarea { 
  width: 100%; 
  resize: none; 
  max-height: 100px; 
  -off-padding:0 
} 
div { 
	position: relative; 
	overflow: auto; 
	border: 1px solid; 
	max-height: 100px; 
}

<div contenteditable></div> 
<textarea rows="1"></textarea>