没有滚动条的弹性滚动

Question

我正在尝试让我的主区域容器（溢出：自动）滚动，但没有额外的滚动条。目前容器有一个额外的滚动条。我想使用主滚动条上下滚动。我确定我必须做一个稍微不同的布局才能让它工作。我更喜欢 flexbox 解决方案，但是我对任何方法都持开放态度。

<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>.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>.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>.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>.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>.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>.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%; 
}

Answer 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>.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>.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>.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>.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>.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>.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>

没有滚动条的弹性滚动

flex scroll with no scroll bar

scroll

overflow

flexbox