I’m working on the following AppSidebar() component using TailwindCSS.

export const AppSidebar = () => {
    return (
        <div className=" text-gray-50 bg-black rounded-lg flex flex-col max-w-249 h-full">
            <div className="mt-3 flex flex-col overflow-auto">
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />
                <TickerCard />

            </div>
        </div>
    )
}

This component is wrapped in the following component.

export const App = () => {
    return (
        <div className="flex grow bg-black lg:max-w-screen-3xl mx-auto rounded-xl lg:gap-x-2">
            <AppSidebar />
        </div>
    )
}

Which is finally wrapped in this:

export default function Home() {
    return (
        <div className="flex flex-col h-screen ">
            <DashNav />
            <App />


        </div>
    )
}

I have a setup with two main parts: a navigation bar and the main application area. The parent container uses flex-column to make the app fill the screen vertically (h-screen). Inside the main app, I use flex layout for flexibility. The issue is with the sidebar (AppSidebar) which I want to extend to the bottom of the viewport (h-full). However, applying “h-full” prevents the desired scrolling behavior within the sidebar’s container. Instead of getting a scroll bar when the content exceeds the sidebar’s height, it stretches the top-level Home div and adds a scroll bar to the entire page. However setting AppSidebar to h-1/2 (for instance) creates the scroll bar as intended. Why? How do I fix this?