JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="scroll-outer">
  <div class="scroll-inner">
    <div class="in">
      inside
    </div>
    <div class="out">
      outside
    </div>
  </div>
</div>

CSS

.scroll-outer {
  position: relative;
  border: 1px solid black;
}
.scroll-inner {
  position: static;
  overflow-x: scroll;
  overflow-y: visible;
}

.in {
  width: 2000px;
  background: yellow;
}

.out {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 9999;
}