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

Question

我有一个 HTML 和 CSS 文件，其中包含以下代码：

<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);
}

看起来像这样： page with header

删除包含 header class 的 div 元素时，多余的滚动条消失了（这正是我想要的）： page without header

如何在不删除 [=13] 的情况下删除额外的水平和垂直滚动条（不包括 div 和 container_1 class 中的垂直滚动条） =] 包含 header class?

Answer 1

我试图在 Mac 上重新创建它，但对我来说，它运行良好。但是，我会说，在您的元素上使用 overflow: hidden 进行实验。

您可以尝试将 overflow: hidden 添加到您的 body 元素，看看效果如何。
另外，别忘了我们还有 overflow-y 和 overflow-x，它们都很有用。

Answer 2

display:grid 是比 flexbox 更好的布局选择：

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>

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

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

html

css