Quill .ql-container extends size of quill-editor

I have a weird problem in which my child div extends beyond size of parent div

<div class="editor-container">
<quill-editor
[(ngModel)]="editorContent"
>
</quill-editor>
</div>

body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.editor-container {
height: 100vh;
width: 80%;
margin: 0 auto 0 auto;
box-sizing: border-box;
}
quill-editor {
width: 100%;
height: 100%;
}
::ng-deep .ql-container {
height: 100%;
}
::ng-deep .ql-editor {
white-space: pre-wrap !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
width: 100% !important;
}


import { Component } from '@angular/core';
import {QuillModule} from 'ngx-quill';
import {FormsModule} from '@angular/forms';

@Component({
selector: 'app-document',
imports: [QuillModule, FormsModule],
templateUrl: './document.component.html',
styleUrl: './document.component.css'
})
export class DocumentComponent {
editorContent: string = '';
}


No matter how i set this height and what options i add .ql-container always extends beyond the height of the screen so beyond the height of its parent divs. I expect to have this quil-editor to have always 100% height of the screen, no matter what and only thing that should be scrollable is .ql-editor/.ql-container when the text is too long and it overflows

Continue reading...