Bottom drawer with fixed header and scrollable content

I have a simple bottom drawer with a header fixed and rounder borders.
The content is scrollable so it goes up behing the fixed header.
The problem is that we can see the content and also the background of the content behind the header at top left and right.

How to make the content scrollable but the top limit should be the bottom of the header, not the top ? thank you.

See here also because the scroll doesn't appear here : https://codepen.io/JeffProd-the-encoder/pen/yLQyJLp

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#bottomdrawer {
  width: 200px;
  max-height: 200px;
  position: fixed;
  left: 0px;
right: 0px;
  bottom: 0px;
  overflow-y: auto;
}

#header {
  position: fixed;
  width: 200px;
  background-color: rgb(107 114 128);
  border-top-left-radius: 1.0rem;
border-top-right-radius: 1.0rem;
}

#content {
background-color: rgb(200 200 200);
}

<!-- language: lang-html -->

<div id="bottomdrawer">
  <div id="header">
    TITLE
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.  Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.
  </div>
</div>

<!-- end snippet -->

Probably, it is not necessary to make the #header fixed, because the #bottomdrawer is already fixed. It is better set #content { overflow-y: auto; }:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#bottomdrawer {
  width: 200px;
  height: min(200px, 100%);
  position: fixed;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
}

#header {
  background-color: rgb(107 114 128);
  border-radius: 1rem 1rem 0 0;
  padding: .5rem 1rem;
}

#content {
  background-color: rgb(200 200 200);
  overflow-y: auto;
  flex: auto;
}

<!-- language: lang-html -->

<div id="bottomdrawer">
  <div id="header">
    TITLE
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.  Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.
  </div>
</div>

<!-- end snippet -->

You can use border-top-left and right radius 2px not rem, and padding 5px

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#bottomdrawer {
  width: 200px;
  max-height: 200px;
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
}

#header {
  position: fixed;
  width: 200px;
  background-color: rgb(107 114 128);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  padding: 5px
}

#content {
  background-color: rgb(200 200 200);
}

<!-- language: lang-html -->

<div id="bottomdrawer">
  <div id="header">
    TITLE
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus
    maximus molestie aliquet. Ut feugiat in ex ac posuere.
  </div>
</div>

<!-- end snippet -->