JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scrollport">
  <div class="scrollbox">
    <div class="content">
    <div class="foo"></div>
    </div>
  </div>
</div>

CSS

.scrollport {
  /* height: 100px */
  overflow-y: scroll;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  --scurt: 1px;
}
.scrollbox {
  /* height: calc(100% - 1px); */
  margin-bottom: calc(-1 * var(--scurt));
}
.scrollbox::after {
  content: '';
  display: block;
  height: var(--scurt);
}
.content {
  /* height: calc(100% - 1px); */
  position: sticky;
  top: 0;
  bottom: 0;
}

.foo {
  height: 100px;
  box-sizing: border-box;
  background: red;
  border: 1px solid black;
}

body {
  height: 110vh;
}