How to avoid content div overlapping a footer div inside a scrollable container

Question

Please tell me how I can set a margin or padding to a #list element so that when the final scroll occurs, the #menu does not overlap the #list div?

I know that you can set a margin bottom to the last element of the #list div, but is there a different way to do it?

#home {
  width: 200px;
  height: 300px;
  position: fixed;
  background: blue;
  overflow: hidden;
}

#list {
  width: 100%;
  height: 100%;
  background: green;
  overflow-y: scroll;
  padding-bottom: 50px;
  margin-bottom: 50px;
}

#list div {
  width: 100%;
  height: 150px;
  background: gray;
  margin-bottom: 20px;
}

#menu {
  position: absolute;
  bottom: 0px;
  background: rgb(255 0 0 / 20%);
  width: 100%;
  height: 50px;
  z-index: 1;
}

<div id="home">
  <div id="list">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="menu"></div>
</div>

Answer 1

I think it is a good practice to do

* {
    box-sizing: border-box;
}

At top of your css file.

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

I don't know why it isn't default behaviour because you want this at 100% of time.