https://zetawiki.com/wiki/HTML_textarea_%EC%9E%90%EB%8F%99_%EB%86%92%EC%9D%B4_%EC%A1%B0%EC%A0%88

여기서 부족한 소스

CSS 딱 딸랑 1개  -> textarea {min-height: 50px; resize:vertical;}
 

자바스크립트  -소스는 12로 규정되어 있지만. 자연스러움은 1로 해야하는게 자연스럽다는게...묘한...

function resize(obj) {
  obj.style.height = "1px";  
obj.style.height = (1+obj.scrollHeight)+"px";

}

html 태그

<textarea class="autosize" onkeydown="resize(this)" onkeyup="resize(this)" placeholder="추가 바람"></textarea>
 

CSS 태그

textarea {min-height: 50px; resize:vertical;} overflow-x 기능으로 가로 막기가 안되어서 resize로 가로방지.
 

테스트 잘하고 적습니다. 참고로 scrollHeight는 앞서 1로 하면 무시해도 편함. 숫자를 변형시키면 재계산 해야 함.

resize:vertical 세로로만 사이즈 조절하라. 소스 끝. 소스 잘됩니다.

-------설명은 복잡하지만... 일단 그냥 복사후 쓰고 보세요.