JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fill">
  <div class="grid-wrapper">
    <div class="grid-test">
      <div id="bar">DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
      <div>DERPDERPDERP</div>
    </div>
  </div>
</div>

CSS

body {
  font-size: 24px;
}

.fill {
  height: 35vh;
  width: 35vw;
}

.grid-wrapper {
  display: grid;
  
  height: 100%;
  
  grid-template-areas:
    "mid";

  background-color: red;
}

.grid-test{
  height: 100%
  grid-area: mid;
  overflow: hidden;
  overflow-y: scroll;
}

JavaScript

var obj = document.getElementById("bar");
// simulate some JS based changes.
var i = 0;
setInterval(function () {
    obj.innerHTML = "KAK" + ++i;
}, 100);