HELP ME w/ SIMPLE CSS/FLEXBOX

(please ty, istg im losing my mind over something so simple) GOAL: I want to apply flex-grow to the red ScrollArea to fill the remaining space of <section> in the first <ResizablePanel>. CODE: ResizablePanelGroup > ResizablePanel > Section > Div & ScrollArea is the component tree.
<main className="h-screen">
<ResizablePanelGroup direction="horizontal" className="">
<ResizablePanel defaultSize={25} className="">
<section className="p-3">
<div className="flex items-center space-x-1">
<DashboardIcon className="h-7 w-7" />
<p className="text-xl">My Library</p>
</div>
<ScrollArea className="bg-red-500">
<div>TODO: Apply flex-grow to ScrollArea</div>
</ScrollArea>
</section>
</ResizablePanel>
...
</ResizablePanelGroup>
</main>
<main className="h-screen">
<ResizablePanelGroup direction="horizontal" className="">
<ResizablePanel defaultSize={25} className="">
<section className="p-3">
<div className="flex items-center space-x-1">
<DashboardIcon className="h-7 w-7" />
<p className="text-xl">My Library</p>
</div>
<ScrollArea className="bg-red-500">
<div>TODO: Apply flex-grow to ScrollArea</div>
</ScrollArea>
</section>
</ResizablePanel>
...
</ResizablePanelGroup>
</main>
DM or reply if you can help me out! I've attached a screenshot of the first <ResizablePanel>, and the red element is <ScrollArea>. Thanks!
No description
1 Reply
ZeLinguist
ZeLinguist2mo ago
ANSWER: follow the cascade up and keep defining the height of the (grand)parent(s) of what you want to grow. Make sure that you apply flex everywhere you grow because grow is a flexbox class.
<main className="h-screen">
<ResizablePanelGroup direction="horizontal" className="">
<ResizablePanel defaultSize={25} className="">
<section className="flex h-full flex-col space-y-3 p-3">
<div className="flex items-center space-x-1">
<DashboardIcon className="h-7 w-7" />
<p className="text-xl">My Library</p>
</div>
<ScrollArea className="grow">
<section className="space-y-3">
<div className="flex items-center space-x-2 rounded-xl p-2 hover:bg-muted">
<Skeleton className="h-14 w-14 rounded-xl" />
<Skeleton className="h-4 w-20" />
</div>
</section>
</ScrollArea>
</section>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={75}>
<nav className="flex items-center justify-between p-3">
<div className="flex items-center space-x-2">
<Image
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
src={SpotifyLogo}
alt="Spotify Logo"
width={28}
height={28}
/>
<p className="text-2xl">SpotiBye</p>
</div>
<Link href={"/"}>
<Button>Sign Out</Button>
</Link>
</nav>
{children}
</ResizablePanel>
</ResizablePanelGroup>
</main>;
<main className="h-screen">
<ResizablePanelGroup direction="horizontal" className="">
<ResizablePanel defaultSize={25} className="">
<section className="flex h-full flex-col space-y-3 p-3">
<div className="flex items-center space-x-1">
<DashboardIcon className="h-7 w-7" />
<p className="text-xl">My Library</p>
</div>
<ScrollArea className="grow">
<section className="space-y-3">
<div className="flex items-center space-x-2 rounded-xl p-2 hover:bg-muted">
<Skeleton className="h-14 w-14 rounded-xl" />
<Skeleton className="h-4 w-20" />
</div>
</section>
</ScrollArea>
</section>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={75}>
<nav className="flex items-center justify-between p-3">
<div className="flex items-center space-x-2">
<Image
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
src={SpotifyLogo}
alt="Spotify Logo"
width={28}
height={28}
/>
<p className="text-2xl">SpotiBye</p>
</div>
<Link href={"/"}>
<Button>Sign Out</Button>
</Link>
</nav>
{children}
</ResizablePanel>
</ResizablePanelGroup>
</main>;