Auto-growing textarea with upward expansion on line break

Question

I'm having problems implementing a function that should make a quill input field grow in y-direction up to a certain size on a line break. Basically a chat input field that grows as characters are entered (if needed) in a certain direction. Only when the element has reached a height of 50vh, overflow-y should be set to visible. Im using Quill with Angular (ngx-Quill) for my project.

Here are some example screenshots of what i mean in specific:

screen1

screen2

screen3

Also important to mention is that the TextField in general should only grow upwards and not downwards as in most use cases I have found.

Heres a screen of what the quill editor looks like in the dom:

screen4

Heres my html structure:

<quill-editor [styles]="{height: 'auto', width: '80vw'}"
            [customToolbarPosition]="'bottom'" 
            [placeholder]="'some text ...'"
            (onContentChanged)="contentChanged($event)">  
    <div quill-editor-toolbar>
        <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
        </span>
        <span class="ql-formats">
            <button class="ql-list" value="ordered"></button>
            <button class="ql-list" value="bullet"></button>
        </span>
        <span class="ql-formats">
            <button class="ql-image"></button>
        </span>
  </div>
</quill-editor>

TS:

@Component({
  selector: 'app-quill-input-field',
  templateUrl: './quill-input-field.component.html',
  styleUrls: ['./quill-input-field.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class QuillInputFieldComponent implements OnInit {

  ngOnInit(): void {
  }

  contentChanged(obj: any) {
    // console.log(obj.html)
  }
}

CSS:

.ql-editor {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
}

.ql-container {
    max-height: 45vh;
    overflow-y: auto;
}

I have already managed to make the input field increase on line break with height: auto ... but in the wrong direction -> downwards instead of upwards. Any help is appreciated! :)