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

const ClientLayout = () => {
  const generateParagraphs = (count) => {
    return Array.from({ length: count }, (_, index) => <p key={index}>Paragraph {index + 1}</p>);
  };
  return (
    <div className="client-layout-container">
      <div className="sidebar">{generateParagraphs(1000)}</div>
      <div className="content">{generateParagraphs(1000)}</div>
    </div>
  );
};

export default ClientLayout;

This is what I have to test scrolling. Now sidebar actually doesnt need scrolling. Its content that need scrolling.

.client-layout-container {
  width: 100%;
  height: 100dvh;

  position: relative;
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 0.2rem;

  overflow: hidden;
}

.sidebar {
  background: green;
  height: 100%;
  overflow: auto;
}

.content {
  background: yellow;
  min-height: 100%;
  overflow: auto;
}

Now when sidebar get overflow:auto, then they both scroll independently. But I dont want that overflow: auto in sidebar. I dont want to specify anything about overflow. And so if I remove it. content looses its scroll ability.