我试图让我的主区域容器（带溢出：自动）滚动，但没有额外的滚动条。目前，容器还有一个额外的滚动条。我想用主滚动条上下滚动。我肯定不得不做一个稍微不同的布局来让这个工作。我更喜欢flexbox解决方案，但是对任何方法都是开放的。
https://codepen.io/marti2221/pen/oyxZzx
<section id="container" >
<header id="header" >
<div class="header-top">
<button class="order-btn">Order</button>
<div class="icon-1">
<div class="">icon 1</div>
<div class="">icon 2</div>
</div>
</div>
<div class="header-bottom">
</header>
<article id="content" >
<div class="main-bg">
<div class="menu-box">
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
</div>
</div>
</article>
</section>
html, body {
height: 100%;
width: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-color: lightblue;
}
#container header {
background-color: gray;
height: 200px;
display: flex;
flex-direction: column;
}
.header-top {
display: flex;
justify-content: space-between;
}
.order-btn {
align-self: flex-start;
}
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
.main-bg {
display: flex;
justify-content: center;
}
.menu-box {
width: 35%;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.top-info-wrapper {
display: flex;
justify-content: space-between;
}
.icon-1 {
display: flex;
}
.header-bottom {
display: flex;
width: 35%;
}
答案 0 :(得分：1)
从容器div中删除了flex，因为它不是必需的。还将background-color: lightblue;移到了文章而不是容器div。还在正文标记上添加了margin: 0;。
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#container {
height: 100%;
width: 100%;
}
#container header {
background-color: gray;
height: 100px;
position: fixed;
top: 0;
width: 100%;
}
.header-top {
display: flex;
justify-content: space-between;
}
.order-btn {
align-self: flex-start;
}
#container article {
background-color: lightblue;
overflow-y: auto;
min-height: 0px;
margin-top: 100px;
}
.main-bg {
display: flex;
justify-content: center;
}
.menu-box {
width: 35%;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.top-info-wrapper {
display: flex;
justify-content: space-between;
}
.icon-1 {
display: flex;
}
.header-bottom {
display: flex;
width: 35%;
}<section id="container" >
<header id="header" >
<div class="header-top">
<button class="order-btn">Order</button>
<div class="icon-1">
<div class="">icon 1</div>
<div class="">icon 2</div>
</div>
</div>
<div class="header-bottom">
</header>
<article id="content" >
<div class="main-bg">
<div class="menu-box">
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
<div class="menu-item">
<div class="top-info-wrapper">
<h3>Name</h3>
<h3>$6.50</h3>
</div>
<div class="descr-wrapper">
<p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
</div>
</div>
</div>
</div>
</article>
</section>