CSS field-sizing Property

The field-sizing property allows form inputs and textareas to automatically grow or shrink to fit the size of the text entered by the user.

selector { field-sizing: content; }
fixed The element maintains a fixed size determined by traditional CSS box model properties and browser defaults.
content The element automatically adjusts its size to fit the content currently typed or selected within it.

Code Examples

A basic example showing a text input that expands horizontally as the user types text into it.

<style>
.auto-grow-input {
  field-sizing: content;
  min-width: 100px;
  padding: 8px;
  border: 2px solid #333333;
}
</style>

<input type="text" class="auto-grow-input" placeholder="Type here...">

An advanced example using a textarea that grows vertically and a JavaScript toggle to switch between fixed and content-based sizing.

<div id="container">
  <style>
    .dynamic-area {
      field-sizing: content;
      width: 100%;
      max-width: 500px;
      min-height: 40px;
      padding: 10px;
      background-color: #f4f4f4;
      border: 1px solid #cccccc;
      display: block;
    }
  </style>
  
  <textarea class="dynamic-area" id="myMsg" placeholder="Type a long message..."></textarea>
  
  <button onclick="toggleSizing()">Toggle Fixed Sizing</button>

  <script>
  function toggleSizing() {
    const area = document.getElementById("myMsg");
    const current = window.getComputedStyle(area).fieldSizing;
    if (current === "content") {
      area.style.fieldSizing = "fixed";
      area.style.backgroundColor = "#ffe0e0";
    } else {
      area.style.setProperty("field-sizing", "content");
      area.style.backgroundColor = "#f4f4f4";
    }
  }
  </script>
</div>

Pro Tip

You can use this property to create seamless-looking editable text. By removing the borders and background of an input and applying field-sizing: content, the input looks just like regular text on the page but expands perfectly as the user edits it, making for a very polished inline-editing experience.

Deep Dive

For years, developers had to use complex JavaScript to make a textarea grow as a user typed. Think of the default fixed value like a rigid wooden box; no matter how much you stuff inside, the box stays the same size and you eventually need scrollbars. Using content changes that box into a balloon that expands to hold exactly what is inside. It works on inputs, textareas, and select menus. When set to content, the browser ignores the default intrinsic sizes and looks at the actual value or placeholder text to determine the dimensions. It is a massive win for clean code because it handles height and width dynamically without triggering manual resize events in script.

Best Practices

Always pair field-sizing: content with min-width, max-width, min-height, or max-height. Without these boundaries, an empty input might shrink so small it becomes invisible or hard to click, and an extremely long line of text could stretch the input right off the side of the screen. It is also smart to use the rows attribute on textareas to establish a sensible starting height before the auto-expansion kicks in.

Common Pitfalls

The most common headache is layout shift. As the input grows, it might push other elements around on your page, which can be annoying for users. Also, keep in mind that this property is relatively new. If you do not provide a fallback or ensure your layout can handle both fixed and content sizing, your form might look broken on older browsers that do not recognize the property yet.

Accessibility

Dynamic resizing can be a double-edged sword for accessibility. While it is great for visibility because it prevents text from being hidden behind a scrollbar, the shifting layout can be disorienting for users with cognitive disabilities or those using screen magnifiers. Ensure that when the field grows, it does not obscure other important interactive elements or labels.

Dev Data Table: field-sizing property

default fixed
animatable no
inherited no
experimental no
year_intro 2023
year_standard 0
js_syntax_1 element.style.fieldSizing = "content";
js_syntax_2 element.style.setProperty("field-sizing", "content");
js_note When manipulating this property via JavaScript, ensure you are targeting form-associated elements like input, textarea, or select.
browsers { "Chrome": 123, "Edge": 123, "Firefox": 0, "Safari": 0, "Opera": 109, "Chrome Android": 123, "Safari on iOS": 0, "Samsung Internet": 27, "Opera Mobile": 82 }
results render here...