Width the new field-sizing CSS property, you can allow certain form-related elements to grow/shrink in size as content is inputted. (Only supported on Chrome as of writing this: caniuse)

You can see the feature working if you input some text into the textarea in the snippet below. However, if you use the resize feature of the textarea at all, you will notice the field-sizing feature stops working. It is as if the browser just removes the property from the element after it has been resized.

My question is: How can we allow the field-sizing property to continue to work after a resize has occurred?

I have tried programmatically setting resize: none; and field-sizing: content; after the resizing but nothing seems to allow the field-sizing property to regain control.

textarea {
  field-sizing: content;
  min-width: 6rem;
  max-width: 16rem;
}

<textarea></textarea>

Width the new field-sizing CSS property, you can allow certain form-related elements to grow/shrink in size as content is inputted. (Only supported on Chrome as of writing this: caniuse)

You can see the feature working if you input some text into the textarea in the snippet below. However, if you use the resize feature of the textarea at all, you will notice the field-sizing feature stops working. It is as if the browser just removes the property from the element after it has been resized.

My question is: How can we allow the field-sizing property to continue to work after a resize has occurred?

I have tried programmatically setting resize: none; and field-sizing: content; after the resizing but nothing seems to allow the field-sizing property to regain control.

textarea {
  field-sizing: content;
  min-width: 6rem;
  max-width: 16rem;
}

<textarea></textarea>

• javascript
• html
• css

• 1 Manually resizing the <textarea> simply adds in-line width and height styles. In css, in-line styles have more specificity than element styling so it overrules the field-sizing. From a UI perspective it would be very frustrating for a user to re-size the area and then as soon as you start typing again the area changes. You would need to use JS to track the changes and have thresholds that you think would be beneficial to the user in terms of width/height to then continue the auto resizing which is very possible. – jQueeny Commented Feb 15 at 16:13

2 Answers 2

You can subscribe the start and end events of the textarea resize (there really aren't any), to remove width and height but keep the size, using min-width and min-height.
Warning - this will only work on extensions.

const textarea = document.querySelector('textarea');

textarea.addEventListener('pointerdown', () => {
  const { width, height } = textarea.getBoundingClientRect();
  textarea.style.width = `${width}px`;
  textarea.style.height = `${height}px`;
  textarea.style.removeProperty('min-width');
  textarea.style.removeProperty('min-height');
})

textarea.addEventListener('pointerup', () => {
  const { width, height } = textarea.getBoundingClientRect();
  textarea.style.minWidth = `${width}px`;
  textarea.style.minHeight = `${height}px`;
  textarea.style.removeProperty('width');
  textarea.style.removeProperty('height');
})

textarea {
  box-sizing: border-box;
  field-sizing: content;
  min-width: 6rem;
  max-width: 16rem;
}

<textarea></textarea>

<div class="resizable-wrapper">
  <textarea
    field-sizing="content"
    min-width="6rem"
    max-width="16rem"
    resize="none"
  ></textarea>
</div>

<style>
.resizable-wrapper {
  resize: both; /* Allow resizing in both directions */
  min-width: 6rem;
  max-width: 16rem;
  min-height: 3rem;
  border: 1px solid #ccc;
  overflow: auto;
  display: inline-block; /* Ensures the wrapper resizes properly */
}

.resizable-wrapper textarea {
  width: 100%; /* Fill the wrapper's width */
  height: auto; /* Let field-sizing control height */
  border: none; /* Optional: Remove border for consistency */
  box-sizing: border-box; /* Include padding in element size */
}
</style>