带有 'overflow-y: auto' 的容器添加了额外的水平和垂直滚动条

Question

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?

Answer 1

I tried to recreate this on a Mac, but for me, it is working fine. However, I would say, experiment using overflow: hidden on your elements.

You could try adding overflow: hidden to your body element and see how that goes.
Also, don't forget we also have overflow-y and overflow-x which are both useful.

Answer 2

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>