How to prevent Reach Router from disabling Scrolling in children component

Question

Scrollbar and scrolling is disable in parent element (with "overflow-y" set to "scroll") inside the component in Router children , Why its behaving like this and how do i prevent it / make it work?

live demo here: https://codesandbox.io/s/priceless-johnson-1fkju

import React from "react";
import { Router } from "@reach/router";

import Chats from "./Chats";
import { TopBar, AndroidControls } from "../components/shared";

const Routing = () => {
  return (
    <div className="app-wrapper">
      <TopBar />
     {* <section className="content"> *} // So i tested this, the section element need to be outside of the router comp for it to work , why?
      <Router>
        <Chats path="/" />
      </Router>
    {/* </section> *}
      <AndroidControls />
    </div>
  );
};

export default Routing;

Answer 1

The problem is with your CSS

Slightly modify you css

from this

.content {
  width: 100%;
  height: calc(100% - 22rem);
  padding-bottom: 4.9rem;
  background-color: #fff;
  overflow-y: scroll;
} 

to this

.content {
  width: 100%;
  height: 80vh; /*Changed the height value*/
  padding-bottom: 4.9rem;
  background-color: #fff;
  overflow-y: auto; /*Changed to auto*/
}

CodeSandbox modified