flex scroll with no scroll bar - scroll

Question

I am trying to get my main area container (with overflow: auto) to scroll, but with no extra scroll bar. Currently there is an extra scroll bar for the container. I would like to use to main scroll bar to scroll up and down. Im sure ill have to do a slightly different layout to get this to work. I would prefer a flexbox solution, however am open to any method.
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

Removed flex from container div as it was not required. Also moved background-color: lightblue; to article instead of container div. Also added margin: 0; on body tag.
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>