我正在尝试创建一个消息输入域，使用textarea。我使用textarea的原因是能够动态地改变高度。
为了能够动态地改变textarea和父div的高度，我实现了这段代码。
代码可以正常工作。为了能够使用这个JavaScript代码，我必须在文本区域使用min-height。问题是，我想将文本区域的高度设置为10px，但当使用min-height时，它根本不想工作。我使用height时确实可以工作，但随后JavaScript就不工作了。
更新：
我只是想创建一个用户可以写消息然后发布的区域。在我看来，目前的文本区域太高了，没有理由比需要的更高。所以我希望最初的高度是20px，然后能够随着用户的输入而扩展。

• • 更新更新：**我想知道如何将文本区域的高度设置为10px或20px，但仍然能够在用户键入时动态更改高度，使用我提供的javascript代码

有什么想法如何解决这个问题吗？顺便说一句，我不是很精通CSS。

var areaName = "finder__input";
var textarea = document.getElementById(areaName);

textarea.addEventListener("input", function() {
  const textarea = document.querySelector("textarea");
  const textareaHeight = textarea.clientHeight;
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
});

body {
  color: #292929;
  background-color: #616f91
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 100px;
}

.finder {
  border: 1px solid #fff;
  background-color: #f6f5f0;
  border-radius: 5px;
  /* width: 722px; */
  padding: 3px;
  box-shadow: 2px 2px 1px black, -1px -1px 1px white;
}

.finder__outer {
  position: relative;
  /* width: 700px; */
  border-radius: 5px;
  min-height: 1px;
  padding: 8px;
  background-color: transparent;
  box-shadow: inset 2px 2px 5px -2px black, inset -10px -10px 5px -7px white;
}

.finder__input {
  border: none;
  resize: none;
  background-color: red;
  outline: none;
  font-size: 15px;
  letter-spacing: 1px;
  width: 100%;
  font-weight: bold;
  min-height: 10px;
  max-height: 90px;
}

<div class="container">
  <div class="finder">
    <div class="finder__outer" id="finder__outer">
      <textarea id="finder__input" class="finder__input" type="text" name="q" placeholder="Write a message..."></textarea>
    </div>
  </div>
</div>