Bottom drawer with fixed header and scrollable content

June 8, 2023

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

#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);
}

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

>Solution :

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

#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;
}

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