I have two files, one HTML and one CSS. The HTML file contains the following code:
<div class="app">
<div class="header"></div>
<div class="main">
<div class="container_1">
<h1>Item</h1>
<h1>Item</h1>
<h1>Item</h1>
..
</div>
<div class="container_2"></div>
</div>
</div>
html, body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
}
.app{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.header{
width: 100%;
min-height: 50px;
background-color: rgb(255, 235, 147);
}
.main{
display: flex;
width: 100%;
height: 100%;
}
.container_1{
display: flex;
flex-direction: column;
width: 200px;
height: 100%;
background-color: rgb(255, 147, 147);
overflow-y: auto;
}
.container_2{
width: 200px;
height: 100%;
background-color: rgb(147, 147, 255);
}
This layout can be viewed here: page with header
If I remove the div element with the header class, the extra scrolling bars disappear, which is my desired outcome:
page without header
I am seeking a way to eliminate the unnecessary horizontal and vertical scrolling bars (excluding the vertical scrollbar within the container_1 class) without removing the div that contains the header class.