JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

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

CSS

.scrollport {
  /* height: 100px */
  /* often you want to use a max height so content can but doesn't have to show scroll visual and overflowing content can be scroll/flow */
  /* max-height: 50vh; */
  /* sad issue still that you would not want to show scrollbar depending on overflow/max-height */
  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;
}

/* for setting scroller to height of another el, like `100vh` */
/*
.scrollport { max-height: 100vh; }
.content    { min-height: 100vh; }
.foo        {     height: 300px; }
*/
.