field-sizing: content

Définition

Propriété qui fait grandir un champ de formulaire (input, textarea, select) avec son contenu au lieu d'une taille fixe. Baseline « Newly available » depuis juin 2026. Les bornes se posent avec min-width/max-width ; un width fixe annule l'effet.

Analogie

Un sac extensible qui prend la forme de ce qu'on y met.

Exemple de code

textarea, input {
  field-sizing: content; /* défaut : fixed */
  min-width: 5ch;        /* bornes : jamais width fixe */
  max-width: 40ch;
}
textarea { max-height: 12lh; }
/* la textarea grandit en ligne, puis en hauteur, puis défile */
/* <textarea>Tapez ici…</textarea> */

Cas d'usage

Champs de commentaire ou de chat qui s'ajustent sans script « auto-resize » ni recalcul de scrollHeight.

Anti-pattern

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing