Как изменить мой CSS, чтобы высота текстовой области всегда соответствовала высоте его контейнера div?

Попробуйте сохранить минимальную высоту текстовой области как 100% или около того или попробуйте использовать object-fit: contain(or cover) в текстовой области

Вы можете попробовать это

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

Укажите конкретный height для родительского блока #answerBoxDiv. Таким образом, вы получите соответствующую высоту для этого div.

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

Вам нужно явно установить высоту родительского контейнера (независимо от того, находится ли он в px или rem и т. д.) - таким образом, высота: 100% текстовой области будет заполнена до контейнера.

Расширение текстового содержимого не может быть выполнено с помощью простого css — вам нужен js, чтобы определить высоту содержимого и соответствующим образом настроить родительский контейнер.

Единственный способ сохранить высоту: 100% в родительском контейнере — это его предок имеет установленную высоту (например, 100vh) — таким образом браузер может определить высоту каждого элемента DOM и размер текстовой области соответственно.

ОБНОВЛЕНИЕ. Я добавил функцию 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%; свойство элемента textarea, чтобы он заполнил всю высоту своего родительского контейнера, #answerBoxDiv. Кроме того, вы можете удалить свойство min-height из #answerBoxDiv, чтобы высота контейнера всегда равнялась высоте его содержимого.

Вот обновленный 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>