Content not visible during scorling in Angular component

In Angular, I have three components header, lefpanel and router-outlet for all other component data/page need to display. The initial component introduction have some contents, but only partial content is visible in router outlet others are not visible. The app component is

<div
class="container-fluid p-0 w-100 h-100"
style="
display: grid;
grid-template-areas:
'header header'
'menu content';
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 2fr;
"
>
<app-header [user]="uname" style="grid-area: header;"></app-header>
<app-leftpanel style="grid-area: menu;"></app-leftpanel>
<div style="grid-area: content;overflow-y:auto;">
<router-outlet></router-outlet>
</div>
</div>


The introduction component (when we click About us tab) style is

.login-right {
background: #83648f;
padding: 5rem 10%;
overflow-y: auto;
}


While scrolling the partial content is visisble

Already I posted regarding this, i got some inputs but still not working for me. The stackblitz link is https://stackblitz.com/github/reegan2024/myproject?file=README.md

Can Someone help to solve this.

Continue reading...