How to prevent custom sidenav content from overflowing the viewport in Angular?

In an Angular application, I currently have the following structure. Until now, I was trying to use the mat-sidenav-container.

However, with the Angular Material sidenav, I wasn't able to properly handle content overflow. So, I created a custom (right) sidenav instead.

To work around the overflow and positioning issues, I built a small Angular application with just a few components. The application is available on StackBlitz:
https://stackblitz.com/~/github.com/salmoneric/stackblitz-angular-rsidenav

The issue is related to HTML and CSS and occurs in the "Right Side Navigation" component when the content of this div is long:

<div class="text innav">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam, itaque!
THIS COULD BE VERY LONG!
quam quia est eos autem velit, soluta repellendus expedita? Tempore, ea?
</div>


In this case (when the content is long), scrolling becomes available, but I would also like to reduce the size of this div so that it does not overflow the browser.

Here are the templates:

<!-- MAIN -->
<app-header (toggleSideNavClick)="onToggleSideNavClicked($event)"></app-header>
<app-rsidenav [toggleSideNavFromParent]="toggleChildSideNav"></app-rsidenav>
<app-content></app-content>
<router-outlet />


<!-- HEADER -->
<header class="headerbar">
<div>
<ul class="main-nav-list">
<li><a href="#">MESSAGES</a></li>
<li><a href="#">SCHEDULE</a></li>
<li><a href="#">MISSIONS</a></li>
<li><a href="#">UTILS</a></li>
<li><a href="#">NEWS</a></li>
</ul>
</div>
<div>
<button (click)="clickToggleSideNav()" class="wrap-btn open-btn">
<i>Open</i>
</button>
</div>
</header>


<!-- RIGHT SIDE NAVIGATION -->
<div
[ngClass]="{ visible: isVisible, active: isActive }"
class="wrap wrap-black"
>
<div class="wrap visible wrap-white">
<div class="sidenavheader">
<ul class="sidenavlist">
<li><a href="#">MESSAGES</a></li>
<li><a href="#">SCHEDULE</a></li>
<li><a href="#">MISSIONS</a></li>
<li><a href="#">UTILS</a></li>
<li><a href="#">NEWS</a></li>
</ul>
<button (click)="toggleVisible()" class="wrap-btn close-btn">
<i>Close</i>
</button>
</div>

<div class="text innav">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam, itaque!
THIS COULD BE VERY LONG !
quam quia est eos autem velit, soluta repellendus expedita? Tempore, ea?
</div>
</div>
</div>


<!-- CONTENT -->
<div class="content">
<div class="container">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FwCKBsbwR68?si=gTF_yKMPtV0MZbto"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>

<h1>Who are the largest landowners in Luxembourg?</h1>

<p>
<a
href="https://lequotidien.lu/luxembourg/qui-sont-les-plus-gros-proprietaires-fonciers-du-luxembourg/"
>The largest landowners in Luxembourg are...</a
>
Lorem ipsum...
</p>

<p>
Lorem ipsum...
</p>

<p>
Lorem ipsum...
</p>
<p>
Lorem ipsum...
</p>
</div>
</div>


Here are the CSS:

.headerbar {
background-color: #fff;
border-bottom: 1px solid #ccc;
height: 60px;
display: flex;
justify-content: space-between;

padding: 0 20px;
}

.main-nav-list li {
display: inline;
}

.main-nav-list a {
margin-left: 20px;
}

.main-nav-list li a {
color: rgb(34, 31, 31);
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
}

.wrap {
box-sizing: border-box;
position: fixed;
right: 0;
transform: translateX(100%);
transition: transform 0.5s ease-in-out;
border-radius: 20px 0 0 20px;
}

.wrap-black {
height: 90%;
background-color: rgb(34, 31, 31, 0.5);
width: 60%;
max-width: 800px;
transition-delay: 0.2s;
}

.wrap.visible {
transform: translateX(0);
}

.wrap-white {
overflow-y: auto;
height: 100%;
background-color: rgb(248, 230, 197, 1);
width: 100%;
padding: 0;
position: relative;
}

.sidenavheader {
display: flex;
justify-content: space-between;
align-items: center;
}

.sidenavlist {
list-style-type: none;
padding: 0;
}

.sidenavlist li {
float: left;
margin: 20px 0;
}

.sidenavlist li a {
padding: 1rem;
color: rgb(34, 31, 31);
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
}

.wrap-btn {
margin: 1rem 0;
cursor: pointer;
}

.close-btn {
margin-right: 1rem;
}

.text {
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
}

.text:visited {
color: rgb(34, 31, 31);
}

.innav {
box-sizing: border-box;
background-color: rgb(240, 133, 133);
width: 100%;
padding: 20px;
overflow-y: auto;
min-height: 200px;
max-height: 75vh;
scrollbar-width: thin; /* For Firefox */
scrollbar-color: rgb(34, 31, 31) rgba(240, 133, 133, 0.5); /* For Firefox */
}

.innav::-webkit-scrollbar {
width: 8px;
}

.innav::-webkit-scrollbar-track {
background: rgba(240, 133, 133, 0.5);
}

.innav::-webkit-scrollbar-thumb {
background-color: rgb(34, 31, 31);
border-radius: 4px;
}

@media (max-width: 700px) {
.main-nav {
display: none;
}
}

.content {
width: 100vw;
height: auto;
padding-top: 60px;
}

.container {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

.container h1 {
margin: 20px;
}

.container p {
max-width: 600px;
text-align: left;
margin-bottom: 30px;
}

Continue reading...