How to alter my CSS to ensure that the textarea height always matches the height of its div container?

I have a textarea inside a div, and I wish for the text area height to match the height of the div container.

Currently, the width fits perfectly, however the textbox (which begins empty) only fills about 20% of the div height.

And when an ajax call grabs some text and populates the textarea, the textarea height remains at about 20% of the div and provides a scroll bar.

How can I alter my CSS to ensure that the textarea height always matches the height of its div container?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#answerBox {
  width: 100%;
  height: 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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

You need to explicitly set a height of the parent container (whether that is in px or rem etc) - that way the height: 100% of the textarea will fill to the container.

The expand on text content cannot be done with simple css - you need js to determine the heaight of the content and adjust the parent container accordingly.

The only way tyou can keep height: 100% on the parent container is its ancestor has a height set (eg 100vh) - that way the browser can determine the height of each DOM element and size the text area accrodingly.

UPDATE - I have added a js function to automatiucally increae the height of the parent container on the input. (the textarea autoincreases in height since it is 100% of the parentThis will need massaging - but when you type into the textarea the height will auto expand.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-css -->

#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
}

<!-- language: lang-html -->

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

<!-- end snippet -->

Percentage height does not work with a min-height parent, you would either need to give your parent a height or you could use flex:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

try keeping the min-height of the textarea as 100% or nearby or try using
object-fit: contain(or cover) on your text area

You can try this

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

Give specific height for #answerBoxDiv parent div. So you will get appropriate height for this div.

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