angular: Jumping scrollbar in scroll panel of editText - css

Question

My app has collapsible panel. It contains scroll panel with EditText (is generated by *ngFor). I was trying selve this by adding:
html {
overflow-y: scroll; /*not working*/
}
and another sollutions which i found in this article, but it is not working.
Im also using AutosizeModule to resize EditText (ngx-autosize).
This problem looks like that:
Component:
#Component({/* typical content */})
export class AnswerDialogComponent implements OnInit {
constructor() {
}
answerText: string[] = [/*string values */'];
ngOnInit() {
}
trackByIndex(index: number): any {
return index;
}
}
MyHtml:
<div id="answerDialog">
<h3>Answers:</h3>
<hr>
<nav>
<ul>
<li *ngFor="let i of answerText; let index =index; trackBy: trackByIndex;">
<textarea autosize name="Text" class="input" [(ngModel)]="answerText[index]" ></textarea>
</li>
</ul>
</nav>
</div>
my CSS:
#answerDialog {
display: block;
margin-top: -50px;
width: 300px;
border: 1px solid #8BC3A3;
border-radius: 10px 0 0 10px;
background: #fefefe;
max-height: 595px;
height: auto;
position: fixed;
right: 510px;
z-index: 1;
padding-bottom: 10px;
border-right: 0;
}
hr {
margin-top: 5px;
}
h3 {
font-size: 20px;
text-align: center;
margin-bottom: 15px;
font-family: Helvetica, Arial, sans-serif;
}
.input {
border-radius: 5px;
background: #f8f8f8;
border: 1px solid rgba(0, 0, 0, 0.075);
color: #727272;
width: 90%;
height: auto;
vertical-align: middle;
resize: none;
outline: none;
margin-bottom: 5px;
margin-top: 5px;
}
.input:hover {
border: 1px solid #8BC3A3;
}
.input:focus {
outline: none;
border: 1px solid #8BC3A3;
}
nav ul {
overflow-y: auto;
max-height: 505px;
height: auto;
}
html {
overflow-y: scroll; /*not working*/
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
background: #8BC3A3;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}