您需要显式地设置父容器的高度（无论是px还是rem等）-这样的高度：100%的文本区域将填充到容器中。
对文本内容的展开不能用简单的CSS来完成--你需要JS来确定内容的高度，并相应地调整父容器。
保持身高的唯一方法：100%在父容器上是它的祖先有一个高度设置（例如100 vh）-这样浏览器可以确定每个DOM元素的高度和大小的文本区域递增。

UPDATE -我已经添加了一个js函数来自动增加输入的父容器的高度。（文本区域的高度自动增加，因为它是父容器的100%。这将需要按摩-但当你在文本区域中键入内容时，高度将自动扩展。

function setHeight(element) {
  const container = document.getElementById("answerBoxDiv");
  const height = element.scrollHeight;
  if(height > 100) {
    container.style.height = (element.scrollHeight)+"px";
    }
}

#answerBoxDiv {
  width: 90%;
  height: 100px; **// this is needed - but can be in px / rem / vh or other but NOT % unless its parent has its height set.**
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}

#answerBox {
  width: 100%;
  height: 100%; 
  box-sizing: border-box;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
  resize: vertical;
  overflow: hidden
}

<div id="answerBoxDiv">
   <textarea id="answerBox" oninput="setHeight(this)"></textarea>
</div>

您可以使用CSS高度：100%;属性，使其填充其父容器#answerBoxDiv的整个高度。此外，您可以从#answerBoxDiv中删除min-height属性，以确保容器的高度始终等于其内容的高度。
以下是更新的CSS：

#answerBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;/*keep it zero*/
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}

#answerBoxDiv {
  width: 90%;
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 0px;/*keep it zero*/
  font-size: 10px;
  text-align: left;
  position: relative;
}

以及更新的HTML：

<div id="answerBoxDiv">
  <textarea id="answerBox"></textarea>
</div>

百分比高度不适用于最小高度父对象，您需要为父对象指定一个高度，或者可以使用flex：

html,
body {
  height: 100%;
  margin: 0;
}

#answerBox {
  flex-grow:1;
  width: 100%;
  box-sizing: border-box;
  margin: 5px auto;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}

#answerBoxDiv {
  width: 90%;
  min-height: 50%;
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
}

<div id="answerBoxDiv">
  <textarea id="answerBox"></textarea>
</div>

你可以试试这个

#answerBox {
  height: 100%;
  resize: none;
}

尝试保持文本区域的最小高度为100%或附近或尝试在文本区域使用object-fit: contain(or cover)

为#answerBoxDiv父div给予特定的height。这样您将获得此div的适当高度。

<div class="parent-div" style="height: 100%;">
    <div id="answerBoxDiv">
        <textarea id="answerBox"></textarea>
    </div>
</div>

#answerBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  resize: none;
  border: none;
}

#answerBoxDiv {
  width: 90%;
  min-height: 50%;
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 0;
  position: relative;
}