Вместо 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-ограничения высоты продолжают действовать.

Якорь в одном контейнере, кораблик — в другом. Но CSS всё равно может их связать! Знакомьтесь, CSS Anchor Positioning. С его помощью можно привязать один элемент к другому, даже если они находятся в разных контейнерах. А когда якорь перемещается, CSS сам пересчитывает положение элемента. И всё это без JavaScript. Теперь ваша очередь! Попробуйте первое задание → https://htmlacademy.ru/skill-levels/455/run/1

🔴 Вместе с WayDev запускаем совместную программу обучения фронтенд-разработчиков Сегодня в 12:00 (MSK) руководитель WayDev выходит в эфир, чтобы поговорить с будущими выпускниками напрямую. Расскажет о проектах студии, о том, как команда встречает новичков и работает с ИИ. Свой вопрос можно задать в чате. Успешные выпускники программы проходят собеседование у каждого работодателя. По его итогам — оплачиваемая стажировка, работа в штате или оплачиваемая работа по проектам, формат у каждой компании свой. В конце эфира разыграем бесплатное место на программе среди первых 100 зарегистрировавшихся. 🌞 https://htmlacademy.ru/events/live-waydev