Раньше для авто-высоты textarea приходилось писать скрипты: подписываться на input, сбрасывать height в 0, читать scrollHeight, присваивать обратно — и всё это ломалось при ресайзе окна или в SSR. Теперь в CSS появилось свойство
field-sizing: content, которое решает проблему на уровне браузера.Как это работает
Добавьте одно свойство на textarea или input, и браузер сам подстроит размер под содержимое:
textarea {
field-sizing: content;
min-height: 3em;
max-height: 20em;
}Для input ширина тоже подгоняется под текст. Никакого JavaScript:
scrollHeight и height = 0 больше не нужны.Подводные камни и совместимость
Пока поддержка только в Chromium 123+ (Chrome, Edge, Opera). Firefox и Safari ещё в разработке. Главное ограничение: если задать явные
width или height в px или rem, свойство не сработает. Для textarea лучше сразу отключать стандартный resize, иначе авто-высота конфликтует с ручным ресайзом.Типичная ошибка: игнорирование фоллбэка
Для production-интерфейсов (формы в кабинетах, SaaS, e-commerce) просто положиться на
field-sizing нельзя — в Safari высота останется фиксированной. Практический совет: сделайте постепенное улучшение с фоллбэком через CSS и JS:textarea {
field-sizing: content;
overflow-y: hidden;
resize: none;
}
textarea:not(:focus) {
height: 3em;
}Для старых браузеров добавьте полифил на scrollHeight. Так вы получите стабильный layout без визуальной регрессии.
Вывод:
field-sizing: content — инженерно чистый способ убрать зависимость авто-высоты от JS, но для production в 2024 году обязательно закладывайте фоллбэк, пока Firefox и Safari не догонят Chromium.