CSS field-sizing: content 怎麼用？讓 input 與 textarea 隨內容調整

field-sizing: content 改變的是 preferred size#

field-sizing 有兩個主要值：

MDN 目前將 field-sizing 標示為 Baseline 2026，但舊裝置或舊瀏覽器仍應查相容性。content 可套用到文字類 input、textarea、select 和 file input；每種控制項的尺寸行為不完全相同，因此不要只測一個 input 就推論整個表單。

input 先加上下限，避免只剩游標寬度#

沒有最小寬度時，空的 input 可能只剩下文字游標附近的寬度；有 placeholder 時，初始尺寸也可能以 placeholder 的內容為基準。實務上至少要設 min-inline-size 和 max-inline-size：

1
<label for="display-name">顯示名稱</label>
2
<input
3
  id="display-name"
4
  class="form-control"
5
  type="text"
6
  placeholder="輸入顯示名稱"
7
  maxlength="40"
8
>

1
.form-control {
2
  box-sizing: border-box;
3
  max-inline-size: 100%;
4
}
5

6
@supports (field-sizing: content) {
7
  .form-control {
8
    field-sizing: content;
9
    min-inline-size: 12rem;
10
    max-inline-size: 32rem;
11
  }
12
}

max-inline-size: 100% 讓欄位不超過父容器；maxlength 則從 HTML 層限制輸入長度，也能防止欄位無止境變大。這兩個限制解決的是不同問題，不要只依賴其中一個。

textarea 會先變寬，再在限制內增加高度#

textarea 使用 field-sizing: content 時，會先沿 inline 軸擴展；碰到寬度限制後，才會增加 block 軸的行數。若高度也有上限，內容超過後仍需要捲動查看：

1
<label for="comment">留言</label>
2
<textarea
3
  id="comment"
4
  class="form-control comment"
5
  rows="3"
6
  maxlength="500"
7
></textarea>

1
.comment {
2
  max-inline-size: 100%;
3
}
4

5
@supports (field-sizing: content) {
6
  .comment {
7
    field-sizing: content;
8
    min-inline-size: min(100%, 20rem);
9
    max-inline-size: 36rem;
10
    min-block-size: 6rem;
11
    max-block-size: 18rem;
12
  }
13
}

這裡刻意沒有把 inline-size: 100% 放在支援 field-sizing 的規則裡。固定的 width 或 height 會重新施加固定尺寸，抵消 field-sizing: content 的效果。需要全寬欄位時，可以在不支援 field-sizing 的 fallback 中使用固定寬度，支援後再改用 min/max 邊界。

rows、cols 與固定尺寸不是同一層設定#

使用 field-sizing: content 後，MDN 指出 textarea 的 rows 和 cols 不再決定 preferred size；input 的 size 也不再有原本的效果。這不表示它們會被 HTML 移除，而是 CSS sizing 行為已改由 field-sizing 與其他尺寸屬性主導。

可以用下面的方式理解：

• field-sizing：決定 preferred size 要不要跟內容走。
• min-*／max-*：決定內容可以把控制項推到哪裡。
• maxlength：決定使用者最多能輸入多少字元。
• overflow：決定達到尺寸上限後要顯示還是捲動內容。
• rows／cols：在未使用 field-sizing: content 時，才比較接近傳統的初始尺寸控制。

不要同時設定一組固定 width、固定 height，再期待 field-sizing 自動覆蓋它們；最後通常只會得到一個看起來沒有作用的 CSS 宣告。

舊瀏覽器 fallback 要保留可用的固定版面#

@supports 適合把新屬性包起來，讓不支援的瀏覽器仍拿到固定尺寸：

1
.form-control {
2
  display: block;
3
  inline-size: min(100%, 36rem);
4
  min-block-size: 2.75rem;
5
}
6

7
@supports (field-sizing: content) {
8
  .form-control {
9
    inline-size: auto;
10
    field-sizing: content;
11
    min-inline-size: 12rem;
12
    max-inline-size: 100%;
13
  }
14
}

如果欄位尺寸變化會推動下方大型內容，仍應在真實表單上檢查版面跳動；可以搭配 content-visibility 與 contain-intrinsic-size 的 CLS 檢查理解「延遲內容」和「動態尺寸」各自的版面影響。兩個屬性解決的不是同一個問題，但都需要看實際 layout，而不是只看 CSS 宣告是否存在。

什麼時候不要使用 field-sizing: content#

下面幾種情境，固定或彈性容器可能比內容尺寸更容易維護：

• 工具列中的輸入框必須和旁邊按鈕保持固定對齊。
• 表格欄位需要一致的欄寬，不能因某一筆資料變長而改變整欄。
• 長文字來自使用者或外部資料，無法先設合理的最大寬高。
• 舊瀏覽器仍是主要使用者，而 fallback 和新行為的差異會影響操作。

對話框、標籤輸入和短名稱欄位通常比較容易看出好處；大型資料表則應先測試資料分布與鍵盤操作，再決定是否採用。

驗證表單的三個狀態#

套用後不要只輸入一個短字串。至少測試：

1. 空值加上 placeholder，確認欄位不會縮成游標寬度。
2. 接近 maxlength 的長值，確認不會突破容器。
3. textarea 超過 max block size 後，確認鍵盤、捲動條與錯誤訊息仍可操作。

若要確認實際支援狀態，可以在 DevTools 執行：

1
CSS.supports('field-sizing', 'content');

這只能回答目前瀏覽器是否理解宣告，不能取代實際的響應式與無障礙測試。每個控制項仍要確認 label、focus 狀態、錯誤訊息和鍵盤操作。

結論：用內容尺寸，但把邊界寫進 CSS#

field-sizing: content 適合拿來移除短文字欄位的固定空白，或讓 textarea 在輸入內容時自然增加高度。可靠的寫法不是只加一行 field-sizing: content，而是同時處理 min/max 尺寸、maxlength、fallback 與超過上限後的捲動行為。

常見問題#