无法将高度动态设置为文本区域

Question

我有一个文本区域，其中文本区域的高度将根据文本的长度动态增加。一旦它达到200px的高度，就会出现鞘翅目。不知何故，当我在滚动出现后删除文本时，我无法降低高度。即使内容未完全占用，高度也保持不变。

我正在尝试与聊天中存在的文本区域(动态(匹配 https://www.intercom.com/。

HTML & JS

  <div class="container">
      <textarea placeholder="Text goes here..." onkeydown="expand(this)" onkeyup="expand(this)"></textarea>
    </div>
    <script>
      function expand(element) {
        if (element.scrollHeight < 200) {
          element.style.height = "0px";
          element.style.height = (element.scrollHeight) + "px";
        } else {
          element.style.height = "200px";
          element.style.overflowY = "auto";
        }
      }
    </script>

.CSS

.container {
  min-height: 16px;
  max-height: 200px;
  width: 300px;
}
.container textarea {
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  color: #565867;
  background-color: #f4f7f9;
  resize: none;
  //border: none;
  overflow: hidden;
  font-size: 14px;
  width: 100%;
  height: 100%;
}

在这里摆弄

Answer 1

更改以下代码以使其正常工作

.container {
  min-height:18px;
  max-height: 200px;
  width: 300px;
}

到

.container {
  height:18px;
  max-height: 200px;
  width: 300px;
}