How to set the leftside not scrolling on the page scroll in html

Question

I am working on a react/nextjs project and making something like fb main page where the left menu bar doesn't scrol on page scroll. I have tried all the css positions but the leftbar still scroll the page scroll.

here is my page code. can you please help.

import { ThemeProvider } from "next-themes";
import Footer from "@/pages/footer/Footer";
import Header from "@/pages/header/Heaader";
import LeftBar from "@/pages/leftbar/Leftbar";
import Feeds from "@/pages/feeds/Feeds";
import Rightbar from "@/pages/rightbar/Rightbar";

export default function Home() {
    return (
        <section className="flex flex-col min-h-screen">
        <header className="sticky top-0 z-10 w-full shadow-md">
            <Header />
        </header>
        <main className="flex justify-around gap-2 overflow-y-auto">
            <section className="sticky top-0 w-20 lg:w-80 shadow border border-blue-500">
                <LeftBar />
            </section>
            <section className="flex-auto flex-grow-2 max-w-3xl border border-red-500">
                <Feeds />
            </section>
            <section className="flex-auto flex-grow-1 max-w-md border border-green-500">
                <Rightbar />
            </section>
            </main>
        </section>
    );
}

I have already tried relative and sticky positioning with top as 0 and overflow position still not working.

FIXED: I think I found the answer to that. the key was was to put an extra layer before the fixed section. so far what I have understood is to put 3 parellel sections under the main section and then in the first section where you have the left section create the child with fixed positioning. something like below:

import { ThemeProvider } from "next-themes";
import Footer from "@/pages/footer/Footer";
import Header from "@/pages/header/Heaader";
import LeftBar from "@/pages/leftbar/Leftbar";
import Feeds from "@/pages/feeds/Feeds";
import Rightbar from "@/pages/rightbar/Rightbar";

export default function Home() {
  return (
    <section className="flex flex-col min-h-screen">
      <header className="sticky top-0 z-10 w-full shadow-md">
        <Header />
      </header>
      <main className="flex justify-around gap-2 overflow-y-auto">
        <div className=" top-0">
          <section className=" fixed w-20 lg:w-80 shadow border border-blue-500">
            <LeftBar />
          </section>
        </div>

        <section className="flex-auto flex-grow-2 max-w-3xl border border-red-500">
          <Feeds />
        </section>
        <section className="flex-auto flex-grow-1 max-w-md border border-green-500">
          <Rightbar />
        </section>
      </main>
    </section>
  );
}