Container with 'overflow-y: auto' adds extra horizontal and vertical scrolling bar

Issue

I have a HTML and CSS files containing 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);
}

Which looks like this:
page with header

When removing the div element which contains the header class, the extra scrolling bars are gone (which is what i want):
page without header

How can I get rid of the extra horizontal and vertical scrolling bars (not including the vertical one inside the div with the container_1 class) without removing the div containing the header class?

Solution

display:grid is a better layout choice than flexbox for this:

html, body{
    margin: 0;
    padding: 0;
}

body{
    width: 100vw;
    height: 100vh;
}

.app{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 200px 200px auto;
    height: 100%;
}

.header{
    min-height: 50px;
    background-color: rgb(255, 235, 147);
    grid-column: 1 / span 3;
}

.main {
    display:contents;
}

.container_1{
    background-color: rgb(255, 147, 147);
    overflow-y:auto;
}

.container_2{
    background-color: rgb(147, 147, 255);
}

<div class="app">
   <div class="header"></div>
   <div class="main">
       <div class="container_1">
           <h1>Item</h1>
           <h1>Item</h1>
           <h1>Item</h1>
           <h1>Item</h1>
           <h1>Item</h1>
           ...
       </div>
       <div class="container_2"></div>
   </div>
</div>

Answered By – Alohci

Answer Checked By – David Goodson (AngularFixing Volunteer)