html中如何设置页面滚动左侧不滚动

Question

我正在开发一个react/nextjs项目，并制作类似fb主页的内容，其中左侧菜单栏不会在页面滚动时滚动。我已经尝试了所有的 css 位置，但左侧栏仍然滚动页面滚动。

这是我的页面代码。你能帮忙吗？

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>
    );
}

我已经尝试过相对和粘性定位，顶部为0，溢出位置仍然不起作用