Почему height auto у textarea не выставляется меньше 50px?

Question

[Davidaa_WoW]

Есть скрипт, позволяющий автоматически регулировать высоту textarea:

// auto resize element
	textarea.addEventListener('input', function (event){
		event.target.style.height = 'auto';
		event.target.style.height = event.target.scrollHeight + 'px';
	});

Изначально высота стоит в 50px. Размер шрифта 23px, padding 2px. Далее, при переносе новых строк высота прибавляется и убавляется как надо, но никогда не становится меньше 50px. Что это за поведение? И как сделать изначальную и динамическую высоту при одной строке в одну строку, а не в две?

Comments

[IvanU7n]

overflow-x: hidden;?

[Davidaa_WoW]

Нет, overflow: hidden не помогает

[alexalexes]

но никогда не становится меньше

Вероятно, установлено свойство min-height = 50px (оно же в JS - minHeight = '50px');

И как сделать изначальную и динамическую высоту при одной строке в одну строку, а не в две

Попробуйте на постоянной основе:
height: fit-content;
Чтобы не городить JS со сменой высоты.

Answer 1

[Davidaa_WoW]

Оказалось, что по умолчанию у textarea атрибут rows="2", даже если явно не указан. И элемент постоянно пытается подогнать значение высоты под него.
Нужно просто установить в html/js значение атрибута rows="1", тогда у элемента будет ожидаемое поведение.