无法将高度动态设置为 textarea

Question

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

我正在尝试匹配 https://www.intercom.com/ 聊天中的 textarea(dynamic)。

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%;
}

Fiddle here

Answer 1

更改以下代码使其工作

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

进入

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