Create A 3 Row Container w/ A Scrollable Middle Row

app.css

:root{
  font-size: 16px;
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  overflow-y: hidden;
  height: 100%;
  /* min-height: 100vh; */
}

.App {
  display: grid;
  grid-template-rows: 10rem 1fr 10rem;
  height: 100%;
  border: 10px solid blue;
}

.element {
  border: 1px solid red;
  overflow-y: scroll;
}

.child {
  height: 10rem;
}

app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <div className="element">Top</div>
      <div className="element">
        <div className="child">Get</div>
        <div className="child">this</div>
        <div className="child">thing</div>
        <div className="child">to</div>
        <div className="child">work!</div>
      </div>
      <div className="element">Bottom</div>
    </div>
  );
}

export default App;