Вместо resize: none — поле, которое растёт само

В нашем готовом шаблоне HTML-формы есть совет: пользователи могут растягивать <textarea> и ломать вёрстку, поэтому заблокируйте это через resize: none.

Совет рабочий, но у него есть цена. Мы проверили в Chrome: в поле с resize: none и стандартной высотой в две строки 20 строк текста так и остаются в окошке высотой 42 пикселя при использованных нами стилях. Видно две строки, остальное — только прокруткой, а увеличить поле человек не может.

С июня 2026 года у этой задачи есть решение получше. Свойство field-sizing работает в актуальных версиях всех основных браузеров: последним 16 июня его добавил Firefox 152. Со значением content поле подстраивает размер под текст:

textarea {
field-sizing: content;
box-sizing: border-box;
width: 100%;
min-height: 3lh;
max-height: 10lh;
}

width: 100% удерживает ширину поля в пределах контейнера, а box-sizing: border-box учитывает отступы и рамки. min-height и max-height задают рамки по высоте, примерно соответствующие трём и десяти строкам. Точное количество видимых строк зависит от отступов и рамок. При высоте строки 20 пикселей ограничения составят 60 и 200 пикселей. Поле растёт вниз до заданного предела, не расширяясь в стороны, а дальше содержимое прокручивается.

Три оговорки.

Ручное растягивание никуда не делось. field-sizing его не отключает: у нашего поля вычисленный resize остался both. Ширину мы уже ограничили через width: 100%, а resize: vertical запретит пользователю вручную растягивать поле в стороны. При этом ручное изменение высоты может повлиять на дальнейший автоматический рост.

Не задавайте фиксированную высоту. MDN предупреждает: фиксированный height помешает полю автоматически расти вместе с текстом. А вот ширину задавать можно — это не мешает увеличению высоты. Для ограничения роста используйте min-height и max-height.

Свойство появилось везде совсем недавно. В старых браузерах оно может не сработать. Атрибут rows у <textarea> стоит указать: при field-sizing: content он не определяет высоту, а там, где свойство не поддерживается, по-прежнему влияет на исходный размер поля. При этом CSS-ограничения высоты продолжают действовать.