JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="holder">

  <div id="container">
    <div id="child"></div>
    TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br> TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br> TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br> TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br> TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br> TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br> TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br> TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br> TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
    <br>TEXT
  </div>
</div>

CSS

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: sans-serif;
}

#holder {
  width: 80%;
  height: 80%;
  overflow-y: auto;
}

#container {
  position: relative;
  background-color: lightgrey;
}

#child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 50px;
  background-color: lightcoral;
}