Growing textareas with field-sizing

Baseline 2026 Reference ↗

Let a textarea adjust its height to its content without measuring scrollHeight in JavaScript. Give it a fixed inline size so that longer text wraps and adds lines.

<style>
  textarea {
    display: block;
    box-sizing: border-box;
    inline-size: min(100%, 32rem);
    min-block-size: 6lh;
    max-block-size: 12lh;
    line-height: 1.5;
    overflow: auto;
    field-sizing: content;
  }
</style>

<label for="note">Your note</label>
<textarea id="note" name="note" rows="4"
  placeholder="Start typing..."></textarea>

field-sizing: content lets the control shrink or grow with its contents. The minimum keeps an empty field usable; the maximum makes additional content scroll instead of expanding the page indefinitely. lh is relative to the element’s line height.

When content sizing is active, rows and cols no longer determine the preferred size. Placeholder text can also affect the size.

This is Baseline 2026. Older browsers ignore the property and retain normal textarea sizing; the CSS size constraints and manual resize handle remain useful.