JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer">
  <div id="button">click me</div>
  <div id="inner">
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
    <p>זה סתם מלל כדי להרבות באורך של הדיב שלי</p>
  </div>
</div>

CSS

body {
  width: 100%;
}

#footer {
  max-width: 80vh;
  position: fixed;
  max-height: 18vh;
  background: #999999;
  bottom: 0px;
  margin: auto;
  left: 50%;
  transform: translate(-50%);
}

#inner {
  overflow-y: auto;
  max-height: inherit;
}

#button {
  background: #128741;
  padding: 5px;
  position: absolute;
  top: -15px;
  right: 15px;
  z-index: 999;
}