I encountered an issue while creating a dashboard with a sidebar on the left side. When adding content to the page, some of it ended up hidden behind the sidebar. I tried using overflow-x:auto and this was the result:
https://i.stack.imgur.com/5qHJY.jpg
Below is the code snippet for the dashboard:
.container {
display: flex;
flex-direction: row;
overflow-x: auto;
}
.sidenav {
position: absolute;
float: left;
height: 100%;
z-index: 1;
left: 0;
overflow-x: hidden;
}
.content {
float: right;
margin-left: 5rem;
}<div class="main">
<div>
<app-header></app-header>
</div>
<div class="container ">
<div class="sidenav">
<app-sidebar></app-sidebar>
</div>
<div class="content">
<router-outlet></router-outlet>
</div>
</div>
</div>Upon removing overflow-x:auto from the 'container', the layout experienced issues like these:
https://i.stack.imgur.com/Nvawc.png
Seeking advice on how to address this dilemma. Appreciate any assistance provided.