field-sizing: contentだけで、入力量に応じて高さが自動で伸びるテキストエリア。従来JSが必須だった挙動がCSS1行になりました。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
field-sizing: content は「フォーム部品のサイズを内容に合わせる」プロパティで、これまで scrollHeight を監視するJSで実装していた自動リサイズがCSSだけで済みます。最低・最大の高さは min-height / max-height で制御し、単位に lh(1行の高さ)を使うと「2行分〜10行分」と直感的に書けます。上限を超えた分は通常どおりスクロールします。
未対応ブラウザでは普通のtextareaとして動くため、そのまま出しても壊れません(プログレッシブエンハンスメント)。対応状況はBaselineバッジを確認してください。
入力に合わせて高さが自動で伸びるテキストエリアを作ってください。JSではなくfield-sizing: contentを使い、min-height/max-heightをlh単位で指定、resize: noneで手動リサイズを無効化してください。