문의란이 내용만큼 늘어나게 만들고 싶을 때, 예전에는 입력할 때마다 scrollHeight를 재는 스크립트를 붙였습니다. 요즘은 CSS field-sizing: content 한 줄로 textarea가 글자 수에 맞춰 커집니다.
견적·상담처럼 내용 길이가 들쭉날쭉한 폼에서 스크롤 칸만 보이는 답답함을 줄일 수 있고, 미지원 브라우저는 속성을 무시해 점진 적용하기 좋습니다.

1. textarea에 content를 걸고 최소·최대 높이 정하기

핵심은 field-sizing: content입니다. 문의 폼에서는 width: 100%로 폭을 고정하고, min-height·max-height로 너무 작거나 끝없이 커지지 않게 막습니다. 최대 높이에 닿으면 안쪽 스크롤이 생깁니다. lh 단위를 쓰면 글꼴 크기에 맞춰 감이 좋습니다.

/* 문의 내용 textarea */
.inquiry-body {
  field-sizing: content;
  width: 100%;
  min-height: 4lh;
  max-height: 12lh;
  overflow: auto;
  box-sizing: border-box;
  resize: none;
}

플레이스홀더가 길면 처음 높이도 커질 수 있어, 안내 문구는 한두 줄로 짧게 두는 편이 낫습니다. 예전에 쓰던 자동 높이 스크립트가 style.height를 넣고 있다면 네이티브 조절을 막을 수 있으니, 지원 브라우저에서는 측정 코드를 끄세요.

2. 구형 브라우저와 한 줄 입력칸

@supports로 감싸면 구형은 기존 고정 높이를 유지합니다. 한 줄 input에도 적용할 수 있지만, 폭이 흔들리면 textarea에만 쓰는 편이 안전합니다. 적용 후 최신 크롬·사파리·파이어폭스에서 타이핑해 보고, 최대 높이에서 스크롤이 생기는지와 모바일 키보드가 올라온 뒤 레이아웃만 확인하면 됩니다.

@supports (field-sizing: content) {
  .inquiry-body {
    field-sizing: content;
    min-height: 4lh;
    max-height: 12lh;
  }
}

/* 미지원 시 기존 높이 유지 */
.inquiry-body {
  min-height: 120px;
}