以可編輯內容自動調整元素大小的一行程式碼。
在沒有 field-sizing 的情況下，如要建立大小適中的輸入欄位，您必須以文字欄位輸入的平均大小猜測，或使用 JavaScript 計算字元數，並在使用者輸入文字時增加元素的高度或寬度。換句話說，這不容易，且嘗試追蹤使用者輸入的內容時很容易出錯。
使用 field-sizing 時，您需要一行 CSS 才能根據內容調整大小。這種大小調整樣式不只適合文字區域，
textarea, select, input {
field-sizing: content;
}
快速連結
喜歡短篇影片嗎？
Wes Bos 和 Jhey 在 Twitter 上都有一部很棒的影片，為您介紹 field-sizing。
欄位大小會影響哪些元素？
下方列出 field-sizing 使用的 <form> 元素，以及其對各項元素的影響摘要。
<textarea>
輸入內容會收合為 min-inline-size 或符合預留位置。
隨著使用者輸入文字，輸入內容會依照內嵌方向增長，直到達到內嵌大小上限為止，此時文字會遭到換行，輸入的區塊大小則會配合新行而擴大。
<select>和<select multiple>
選取元素會縮小為符合所選項目的大小。
包含 multiple 屬性的選取項目會擴大符合最寬的選項，並且視需要高度，以符合選項數量。
<input type="text">、<input type="email">和<input type="number">
輸入內容會收合為 min-inline-size 或符合預留位置。
隨著使用者輸入內容，輸入內容會內嵌於內嵌方向，直到達到 max-inline-size 為止，此時輸入的值就會溢位。
<input type="file">
輸入內容會收合至按鈕和預填的檔案名稱文字。
上傳檔案時，輸入內容的寬度將與按鈕加上檔案名稱相同。
查看、測試及比較成效
以下是每個表單元素在 field-sizing 影響的前後行為最少互動範例。
近距離觀察
使用 [placeholder] 時，預留位置會成為內容。本文先前曾提到，但之所以在此說明，請務必瞭解表單樣式設定方式。長或短的預留位置會透過 field-sizing:
content 變更內建函式的輸入大小。
空白和溢位樣式處理
使用 field-sizing 代表您必須執行一些額外工作。Ahmad Shadeed 稱之為「防禦 CSS」，目標無須明確指出特定行為或外觀應如何呈現，而非防止結果變成不理想的視覺狀態。以往，輸入內容的固定大小相當有限，但套用 field-sizing: content 後，輸入可能會太大或太大。
建議您從下列樣式著手。這有助於元素不會收合成太小的方塊，而且在 textarea 的情況下，不會放大至過大。
textarea {
min-block-size: 3.5rlh;
min-inline-size: 20ch;
max-inline-size: 50ch;
}
select {
min-inline-size: 5ch;
min-block-size: 1.5lh;
}
input {
min-inline-size: 7ch;
}
此 CSS 會使用相對單位調整大小。新的 lh 單位非常適合區塊大小，ch 適用於內嵌大小。
欄位大小的預設值為何？
field-sizing 的預設值為 fixed，且只接受 fixed 或 content 的兩個值。