JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  
  <div class="inner">
    <input type="text" autofocus></input>
    <span></span>
  </div>
</div>

CSS

div.outer {
  height: 100px;
  width: 100px;
  overflow: auto;
  margin: 20px;
  border: 1px solid red;
}

div.inner {
  position: relative;
  height: 500px;
  width: 500px;
  border: 1px solid blue;
}

div.inner > input {
  width: 1px;
  height:1px;
  position: absolute;
  top: 300px;
  left: 200px;
  border:0;
  outline:0;
  z-index: 0;
}
div.inner > span {
  width: 1px;
  height:1px;
  position: absolute;
  top: 300px;
  left: 200px;
  z-index: 1;
  background: white;
}