动态更改textarea元素的高度

Question

我正在尝试动态更改 textarea元素的高度，但是我的代码无法正常工作。

应如何处理：

当出现新行时，文本区域的高度会增加，直到达到最大高度为止。

删除线条时，textarea的高度会减小，直到达到其最小高度为止。

正在发生的事情：

高度随着添加新行而增加，但删除行时textarea的行为不符合预期。它减小得更慢，并且没有达到最小高度。

let textInput = document.querySelector(".text-input");

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

.text-input {
  width: 100%;
  max-height: 250px;
  min-height: 100px;
  resize: vertical;
  box-sizing: border-box;
}

<textarea class="text-input"></textarea>

修改

来自发布的链接。一个简单的解决方法是添加以下行

  textInput.style.height = textInput.scrollHeight + 'px';