Как запретить Reach Router отключить прокрутку в дочернем компоненте

Question

Полоса прокрутки и прокрутка отключены в родительском элементе (с параметром «overflow-y», установленным в «scroll») внутри компонента в дочерних элементах маршрутизатора. Почему он ведет себя так, и как мне предотвратить его / заставить его работать?

демо здесь: 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

Проблема с вашим CSS

Слегка измените ваш CSS

с этого

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

на этот

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

CodeSandbox изменен