STEP 1
これまでは大きさが固定
入力欄の大きさは、中身の量に関係なく決まっていました。下の入力欄に文字を足してみてください。
textarea は高さが変わらずスクロールバーが出て、input は幅が変わりません。
field-sizing: fixed（既定値）
STEP 2
field-sizing: content で中身に合わせる
同じ入力欄に field-sizing: content を指定すると、入力した内容に合わせて大きさが変わります。select も選んだ項目の長さに合わせて幅が変わります。
伸びすぎを防ぐ
min-height・max-height で伸び縮みする範囲を決めておきます。上限を超えるとスクロールバーが出ます。
field-sizing: content
使っている機能
field-sizing: content- <textarea>・<input>・<select> の大きさを入力内容に合わせる。既定値は fixed（従来どおり固定）
min-height / max-height- 伸び縮みする範囲を決める。上限を超えるとスクロールバーが出る
CSS
/* 入力内容に合わせて大きさを変える */
.sizing-content :is(textarea, input, select) {
field-sizing: content;
}
/* 伸び縮みする範囲を決めておく */
.sizing-content textarea {
min-height: 3lh;
max-height: 8lh;
}
.sizing-content input {
min-width: 4ch;
}