Right, let's talk about the 'mirror span' hack. We've all been there: you're building a sleek search bar or a collaborative comment field that needs to grow as the user types, and suddenly you're writing 50 lines of JavaScript just to calculate scroll heights or synchronise hidden spans.

It's always felt like a bit of a bodge, hasn't it? We shouldn't need a ResizeObserver just to make a <textarea> fit its content. Thankfully, the CSS Working Group heard our collective sighs and gave us field-sizing.

The one-line revolution

Chrome's documentation puts it perfectly: "One line of code for auto sizing elements with editable content." By default, form controls have a fixed size (usually defined by the size or cols attributes). But by switching to content, the element finally behaves like a regular div—it shrinkwraps what's inside.

input, 
textarea, 
select {
  field-sizing: content;
}

I've found this particularly transformative for <select> elements. No more guessing the width of the longest option or letting the browser default to a massive width that breaks your grid. It just fits.

Maintaining Design System Control

Now, a common worry I hear from design system leads is: "Won't this just break my layout if someone pastes a novel into an input?" The answer is a firm no—provided you're using your CSS constraints correctly.

field-sizing: content doesn't mean unbounded growth. It simply changes the preferred size. The element will still respect your max-width or max-inline-size. Once it hits that ceiling, it stops growing and reverts to its standard scrolling behaviour. It's the best of both worlds.

.design-system-input {
  field-sizing: content;
  min-inline-size: 10ch; /* Minimum density floor */
  max-inline-size: 400px; /* Layout safety ceiling */
}

Textareas and the 'Block' Growth

For textareas, the behaviour is even more satisfying. As the user types and text wraps, the block size (height) expands automatically. In my experience, pairing this with lh (line-height) units for max-block-size is the sweet spot for form ergonomics.

.smart-textarea {
  field-sizing: content;
  max-block-size: 10lh; /* Stop growing after 10 lines */
  overflow: auto;
}

The Placeholder Gotcha

One thing you'll want to watch out for is your placeholders. Because the field sizes to fit its content, a long placeholder will force the input to be wide from the start. If you have a placeholder like "Tell us about your favourite memory from childhood," your input will be massive before the user even clicks it.

I've found it's best to keep placeholders punchy or rely on min-inline-size to ensure the field looks consistent across your UI, regardless of the prompt text.

• • •

Wrapping Up

  • Use field-sizing: content to eliminate 'mirror span' and character-counting JS hacks.
  • Always pair autosizing with min-inline-size and max-inline-size to prevent layout blowouts.
  • Remember that placeholders count as content—keep them short or use CSS floors to maintain visual density.

I'd encourage you to try this out on your next search bar or comment component. It's one of those rare features that simplifies your codebase while simultaneously improving the user experience. Let the browser handle the math!

If you want to go deeper and learn how to build real, production-ready CSS design systems step by step, check out my full course here: CSS Design Systems Course

I cover this and the other twenty-seven CSS shifts of 2026 in Modern CSS 2026 on Amazon, my catch-up book for people who learned CSS five years ago.

For more CSS tips and design system deep-dives, let's connect over on Twitter or LinkedIn.