form-sizingプロパティ

フォームのサイズを入力された文字量に合わせて自動変更します。
form-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。
form-sizingは、Chrome 120で実装される新しいプロパティです。

サイズはmin-heightやmax-heightを設定すると、上限下限のサイズも設定できます。
※lhは、行の高さを1lhと設定した相対単位です。ただし、Firefoxの場合は最新版でも「lh」は使えないので、@supports notを使用して、lhが使えないブラウザ向けに代替の指定を適用させる必要があります。

textarea {
  form-sizing: content;
  max-height: 4lh;
}
@supports not (max-height: 4lh) { /* Firefox用 */
  textarea {
    line-height: 1.5em;
    height: calc(1.5em * 4);
  }
}