JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div id="container">
  <div id="child">C</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
  <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>Tdsv<br>TEXT  <br>TEXT
  <br>TEXT
  <br>Tdsv<br>TEXT  <br>TEXT
  <br>TEXT
  <br>Tdsv<br>TEXT  <br>TEXT
  <br>TEXT
  <br>Tdsv<br>TEXT  <br>TEXT
  <br>TEXT
  <br>Tdsv<br>TEXT  <br>TEXT
  <br>TEXT
  <br>Tdsv<br>TEXT  <br>TEXT
  <br>TEXT
  <br>Tdsv<br>TEXT  <br>TEXT
  <br>TEXT
  <br>Tdsv
</div>

CSS

html,
body {
  height: 100%;
}

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

#container {
  position: relative;
  width: 80%;
  height: 80%;
  overflow-y: auto;
  background-color: lightgrey;
}

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

JavaScript

$(document).ready(function() {
   
var maxHeight = container.scrollHeight; 

 $("#child").height(maxHeight);


 
});