Theo's Typesafe Cult•4mo ago

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!

1 Reply

ZeLinguist•4mo 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>;

Gaming

Programming

HELP ME w/ SIMPLE CSS/FLEXBOX