无滚动条的弹性滚动

我试图让我的主区域容器(溢出:自动)滚动,但没有额外的滚动条。目前有一个额外的滚动条为容器。我想用主滚动条上下滚动。我肯定要做一个稍微不同的布局才能使这个工作。我更喜欢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%; 
}