гибкая прокрутка без полосы прокрутки

Question

Я пытаюсь заставить мой контейнер основной области (с переполнением: авто) прокручивать, но без дополнительной полосы прокрутки.В настоящее время есть дополнительная полоса прокрутки для контейнера.Я хотел бы использовать для основной полосы прокрутки для прокрутки вверх и вниз.Я уверен, что мне придется сделать немного другой макет, чтобы заставить это работать.Я бы предпочел решение 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%; 
}

Answer 1

Удалено flex из контейнера div, поскольку оно не требовалось.Также перемещено 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>