Okay I changed this a bit and its working. But I still don't understand why and how? Below is the component

import React from "react";
import "./clientLayout.css";

import Sidebar from "../../containers/Sidebar";
import HeaderPanel from "../../containers/HeaderPanel";
import ContentPanel from "../../containers/ContentPanel";

const ClientLayout = () => {

  return (
    <div className="client-layout-container collapsed">
      <Sidebar />
      <HeaderPanel />
      <ContentPanel />
    </div>
  );
};

export default ClientLayout;

This is the ContentPanel

import React from "react";
import { Route, Routes } from "react-router-dom";
import { SidebarMenus } from "../dataProvider/SidebarMenus";

const ContentPanel = () => {
  return (
    <Routes>
      {SidebarMenus.map((menu, index) => (
        <Route key={index} path={menu.path} element={menu.element} />
      ))}
    </Routes>
  );
};

export default ContentPanel;

And this is one of the route

import React from "react";

const Dashboard = () => {
  const generateParagraphs = () => {
    const paragraphs = [];
    for (let i = 0; i < 1000; i++) {
      paragraphs.push(<p key={i}>Hello {i + 1}</p>);
    }
    return paragraphs;
  };

  return (
    <div className="component-container">
      <div className="main-content">
        <div className="form">
          <h2>Dashboard Content</h2>
          {generateParagraphs()}
        </div>
      </div>
      <div className="side-content">
        <h3>Side Content</h3>
        {generateParagraphs()}
      </div>
    </div>
  );
};

export default Dashboard;

and its working with this css for now:

.client-layout-container {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: 4rem auto;
  grid-template-columns: 15rem auto;
  grid-template-areas: "sidebar header" "sidebar content";
  gap: 0.3rem;
}

.client-layout-container.collapsed {
  grid-template-columns: 7rem auto;
}

.client-layout-container > :nth-child(1) {
  grid-area: sidebar;
}

.client-layout-container > :nth-child(2) {
  grid-area: header;
  background: red;
}

.client-layout-container > :nth-child(3) {
  grid-area: content;
  height: 100%;
  background: blue;
}

.component-container {
  display: grid;
  grid-template-columns: auto 20rem;
  overflow: auto;
}

.main-content {
  overflow: auto;
}

.side-content {
  overflow: auto;
}

can anyone explain why I cannot remove the overflow auto on the component-container as I only want its children div to scroll, so why do I need to specify that there as well. Without that I again lose the scroll on both main-content and side-content.