Large text hides in textarea [duplicate]

This question already has an answer here:

I have textarea field:

<div class="form-group">


<textarea minlength="1" maxlength="1024" placeholder="Message" [(ngModel)]="customModal.userMessage" #comments="ngModel"
name="comments" id="comments" class="form-control input-lg msg-textarea msg-body" rows="5" required></textarea>

</div>


When I add large text the textfield stretches but the upper text keeps hiding.

I want that if I add large text the fields keeps stretching downward.

Update:
I am using angular.
I tried solution:

component.ts

autogrow(){
let textArea = document.getElementById("textarea")
textArea.style.overflow = 'hidden';
textArea.style.height = '0px';
textArea.style.height = textArea.scrollHeight + 'px';
}


html:

<textarea id="textarea" (keyup)="autogrow()" ></textarea>


As my textarea is in popup on every keyup my textarea height keeps changing. Which is not desired behavior.

Update 2
As my modal has property of staying in middle of the page that is why it was fluctuating when textarea size grows.
If I close debugger the fluctuation goes away.

SO post answer I referred

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.