Is there a way to determine when a DOM element’s geometry can be accurately queried?

I’m trying to add content to a textarea based on user action, and size the textarea height to be its scrollHeight such that it can be scrolled inside another container.

It works, but in some cases it fails because it seems to need a bit more time to figure out the scrollHeight before it is queried. If I put a setTimeout of about 10ms, then it works fine again.

There is not a lot of content being added when this happens (far less than in the snippet, but the DOM itself is much more complex).

My question is, Is there a way (apart from setTimeout) to know when the textarea element’s geometry can be accurately queried? I don’t want to pick a delay and hope it works on most machines and find it is too quick for some older equipment.

I could not get the snippet to fail but I think it is because the browser “waits” until it is ready to add the vertical scroll bar, and my UI uses custom scroll bars such that the browser may not wait since its overflow is hidden. I’m just guessing. The delay between the click and the display of the content is not due to building the content because that is performed only once.

Thank you for considering my question and for any guidance you may be able to provide.

let
   btn = document.querySelectorAll('button'),
   ta = document.querySelectorAll('textarea'),
   prnt = document.querySelector('div'),
   arr = [],
   data
;
for (let i=0; i < 100000; i++) arr.push("Paragraph number " + i + ".n");
data = arr.join('');

ta[1].value = "Textarea 2";

btn[0].addEventListener( 'mousedown', AddToTextarea, true);
btn[1].addEventListener( 'mousedown', RemoveText, true);
function AddToTextarea(event) {
  ta[0].value = data;  
  prnt.classList.replace( prnt.classList.item(1), 'ta_0');
  ta[0].style.height = ta[0].scrollHeight + 'px';
  //setTimeout( () => {ta[0].style.height = ta[0].scrollHeight + 'px';}, 500);
}

function RemoveText() {
  ta[0].value = "";
  ta[0].style.height = ta[0].scrollHeight + 'px';
  prnt.classList.replace( prnt.classList.item(1), 'ta_1');
}

textarea {
 display: none;
 border-color: blue;
}

div.ta_0 textarea.ta_0 {
  display: block;
}

div.ta_1 textarea.ta_1 {
  display: block;
}

.parent {
  display: flex;
  flex-flow: column;
  height: 200px;
  width: 200px;
  overflow-y: scroll;
  border: 1px solid black;
}

.parent > div {
  flex: 1 1;
}

<div class="parent ta_1">
 <div>
    <button>Add Text</button>
    <button>Clear Text</button>
    <textarea class="ta_0"></textarea>
    <textarea class="ta_1"></textarea>
  </div>
</div>