Размер текстовой области не изменяется правильно при вводе в JavaScript ⇐ CSS

[Anonymous]

Я пытаюсь создать , размер которого автоматически изменяется в зависимости от содержимого внутри него. Однако иногда он становится слишком большим, больше, чем содержимое.
Я использую попутный ветер в коде и тестирую его в Firefox, если это помогает.
Я пробовал изменить размер шрифта. На самом деле помогало, когда шрифт был достаточно большим, но, конечно, это не окончательное решение. Попробовал еще несколько глупых вещей, а затем понял, что, вероятно, дело не в коде JavaScript, и у меня, вероятно, есть некоторые проблемы в части TailwindCSS.
Вот мой код:

Код: Выделить всё

msgBox.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
});

Код: Выделить всё

body {
background: black;
}

textarea {
background: darkblue;
}

Код: Выделить всё

[*]

Я просмотрел предложенный аналогичный вопрос в комментариях под этим вопросом и думаю, что на самом деле это не тот же вопрос, поскольку я использую попутный ветер, и моя проблема, скорее всего, заключается в неправильном использовании попутного ветра. В предложенном аналогичном вопросе нет ни слова о попутном ветре.
Ну, я все еще не думаю, что проблема вызвана JavaScript, возможно, я неправильно назвал проблему.
Я добавляю фрагмент без попутного ветра.
Я все еще думаю, что это какая-то проблема со стилем, а не неправильный код JavaScript.

Код: Выделить всё

msgBox.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
});

Код: Выделить всё

body {
background: black;
}

textarea {
background: darkblue;
}

Код: Выделить всё

Возможно, мне все еще не понятно, в чем проблема.
Указание максимальной высоты в 100 пикселей — это просто установка максимальной высоты текстовой области, не более того.
Моя проблема в том, что я всегда хочу, чтобы высота текстовой области была идеальной для определенного объема контента. , или текст есть.
Хорошо, есть шаги для воспроизведения (при условии, что вы пробуете первый фрагмент кода с помощью TailwindCSS):

• Нажмите на текстовое поле (и обратите внимание на его высоту)
• напишите что-нибудь

Обратили внимание на разницу в высоте?
Почему он больше, когда текст прекрасно впишется в исходную высоту??
При использовании инструментов отладки браузера я замечаю следующее: когда я начинаю печатать, высота: 64 пикселя; появляется сразу, и я не думаю, что 64 пикселя были исходной высотой текстовой области.
Не вижу разницы, когда я удаляю какие-либо классы, даже все из них, как я когда-то делал, потому что без стилей TailwindCSS текстовая область всегда имеет высоту в две строки, когда нужна только одна строка.
Хорошо..... Я добавляю gif. Это не высокое качество, надеюсь, вы не против. На этой гифке я только что показал вам, что происходит, когда я пишу что-нибудь в текстовой области, хотя не думаю, что эта гифка вам каким-либо образом поможет. Я только что напечатал три знака вопроса.
опять же, вы видите разницу в высоте после того, как я что-нибудь напечатаю? После того, как я напечатаю, два слова могут поместиться друг под другом, почему, если раньше одно слово вполне помещалось?

Подробнее здесь: https://stackoverflow.com/questions/792 ... javascript