Angular textarea with character count: text crashes into char num-CodePudding

I have a textarea in my Angular project with a character count inside its frame (bottom right corner). When you insert text, the text will eventually crash into the character count: charCrash.

I'm looking for a way to avoid this from happening ànd allowing the text area to scroll when the user inputs more lines than visible (about 4 lines are now shown). So scrolling should maybe occur above the character count if possible.

This is my html code so far:

<div class="container">
  <textarea class="form-control text-area" formControlName="textarea"></textarea>
  <div class="text-counter">0 / 100</div>
</div>

And my css:

.container {
  display: flex;
  position: absolute;
}

.text-area {
  position: relative;
  margin-top: 5px;
  height: 100px;
}

.text-counter {
  position: absolute;
  top: 90px;
  right: 10px;
}

I really appreciate your help!

CodePudding user response：

You can work around it by pretending the container is the textarea and then embedding a slightly smaller textarea inside of the container.

<div class="container">
  <textarea class="form-control text-area" formControlName="textarea"></textarea>
  <div class="text-counter">0 / 100</div>
</div>

.container {
  display: flex;
  position: absolute;
  height: 100px;
  border: solid 1px black;
  padding-bottom: 20px;
}

.text-area {
  position: relative; 
  border: none;
  height: 80px;
}

.text-counter {
  position: absolute;
  bottom: 5px;
  right: 10px;
}