How to expand the ResizablePanelGroup to take 100% available height.

[IsuruCreative]

Hi, I am stuck in a middle of CSS issue with ResizablePanelGroup component. In my page layout I am trying to place a header and a ResizablePannelGroup with 4 pannels. Page should have a100vh and within that I want to place other components. After placing Header my ResizablePannleGroup should expand the rest of the height available in the space without manually specifying a height. Only the Content I am putting in the ResizablePannel should be scrollable when they exceed the space available in the pannel.

Above is the current status of the layout and red are should expand the rest of the height available.

import ChatNav from "@/components/chat/ChatNav";
import Header from "@/components/common/Header";
import { Toggle } from "@/components/ui/toggle";
import UtilContext from "@/context/UtilContext";
import type { Metadata } from "next";
import { useContext, createContext } from "react";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="h-screen bg-black">
      <div className="absolute  inset-4">
        <UtilContext>
          <Header />

          <div className="bg-red-500"> {children}</div>
        </UtilContext>
      </div>
    </div>
  );
}

"use client";
import Chat from "@/components/chat/Chat";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import ChatNav from "@/components/chat/ChatNav";
import { useContext } from "react";
import { UtilPanelContext } from "@/context/UtilContext";
import LSide from "@/components/chat/LSide";

const page = () => {
  const { leftPannel } = useContext(UtilPanelContext);

  return (
    <div className="h-full">
      {/* sidbar */}
      <ResizablePanelGroup direction="horizontal">
        {/* side nav */}
        <ResizablePanel defaultSize={10} className="min-w-[80px] max-w-[80px]">
          <div className="h-full flex flex-col">
            <div className="flex-grow-1"> Nav</div>
          </div>
          {/* <ChatNav /> */}
        </ResizablePanel>
        <ResizableHandle />

        {/* history pannel */}
        <ResizablePanel defaultSize={leftPannel ? 30 : 0}>
          <div>LSide</div>
          {/* <LSide /> */}
        </ResizablePanel>
        <ResizableHandle withHandle />

        {/* chat workspace */}
        <ResizablePanel defaultSize={50}>
          <div>Chat</div>
          {/* <Chat /> */}
        </ResizablePanel>
        <ResizableHandle withHandle />

        {/* side panel */}
        <ResizablePanel defaultSize={50}>
          <h1>Hellow </h1>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
};

export default page;

Kind of the expectation I want. ResizablePannelGroup expand in the green color space and inner pannels have scrollable views when the available space exceeds

[imaricodes]

Confirming this unexpected height behavior. The Resizable Panel Group and Panels do not seem responsive to relatively declared heights like height: 100% or min-height: x. I am only able to set a fixed height on these elements.

I've tried to use a Panel Group in a similar way to the way you are using it. Mine contains a chart that is rendered after data is fetched, so I'd prefer the Panel Group to keep a minimum height until the chart renders, then be able to grow with the size of the content.

In the end, I put a height on the panel that contains the chart and gave the chart a fixed height as well so that after rendering, the chart more or less fits in the panel. Because the Panel Group was horizontal, the height of the first panel determined the height of the entire Panel Group. This is not ideal.

Notice how in this example from the shadcn ui site, the first panel has a fixed height? Maybe we must use a fixed height for some reason I don't understand yet.

export function ResizableDemo() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">One</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <ResizablePanelGroup direction="vertical">
          <ResizablePanel defaultSize={25}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Two</span>
            </div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel defaultSize={75}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Three</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

I'm following your question to see how/if you solve this.

[IsuruCreative]

Only solution I found is to provide a fix height inside the ResizablePanel. I tried to make the content within ResizablePanel making the height h-full but still its overflow from the container.

import ChatNav from "@/components/chat/ChatNav";
import Header from "@/components/common/Header";
import { Toggle } from "@/components/ui/toggle";
import UtilContext from "@/context/UtilContext";
import type { Metadata } from "next";
import { useContext, createContext } from "react";

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="h-screen max-h-screen bg-black flex flex-col p-4">
      <UtilContext>
        <Header />
        <div className=" bg-red-500 flex flex-1 flex-col">
          <div className="bg-green-500 flex-1">{children}</div>
        </div>
      </UtilContext>
    </div>
  );
}

"use client";
import Chat from "@/components/chat/Chat";
import { useRef, useEffect } from "react";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import ChatNav from "@/components/chat/ChatNav";
import { useContext } from "react";
import { UtilPanelContext } from "@/context/UtilContext";
import LSide from "@/components/chat/LSide";

const page = () => {
  const { leftPannel } = useContext(UtilPanelContext);

  return (
    <div className="h-full">
      {/* sidbar */}
      <ResizablePanelGroup direction="horizontal">
        {/* side nav */}
        <ResizablePanel defaultSize={10} className="min-w-[80px] max-w-[80px]">
          <ChatNav />
        </ResizablePanel>
        <ResizableHandle />

        {/* history pannel */}
        <ResizablePanel defaultSize={leftPannel ? 30 : 0}>
          <LSide />
        </ResizablePanel>
        <ResizableHandle withHandle />

        {/* chat workspace */}
        <ResizablePanel defaultSize={50}>
          <Chat />
        </ResizablePanel>
        <ResizableHandle withHandle />

        {/* side panel */}
        <ResizablePanel defaultSize={50}>
          <h1>Hellow </h1>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
};

export default page;

this way I can expand ResizablePanelGroup along the available height. But still withingResizablePanel I have to provide a fixed height to make the inside pannel content scroll.

[imaricodes]

I'm not clear where you set the fixed height for a ResizablePanel. Is it the LSide component that has a fixed height?

[IsuruCreative]

Yeah I put fixed height for the inside component. However I found answer the way I want my layout. You can refer this []https://stackoverflow.com/questions/77849991/shadcn-ui-resizablepanelgroup-expand-in-the-available-space-without-specifying-a/77850546#77850546

[Alexjoshua14]

I had a similar scenario to you where I have a header and then the Resizable panels. In my layout the page has 100vh and the then the header has a set height and the Resizable panel group then takes up the remainder. To do this I used h-[calc(100vh-72px)] for the panel group although the hardcoded 72px could be made more dynamic by either using css variables or even potentially utilizing refs to measure the actual height of the header (I can code up a quick example if that'd be helpful).

Here's a link to the source code component I'm referring to: DesktopEditor. And here is a link to the live project: QuantumQuill

[imaricodes]

I did not think of using a calculation for height. My header and footer will have fixed heights and the rest of the screen is taken up by the Resizable component (using it to present a dashboard). I'll get this a go.

[itxtoledo]

add className="min-h-screen" to your ResizablePanelGroup

[ldTaohid880]

Instead of this the best way to do explicitly set height 100vh to ResizablePanelGroup component. like this.

[sahilsh-dev]

What worked for me was setting the parent of the ResizablePanelGroup component to: className="flex flex-col h-screen"

[sudarshan-mane]

Two Important Classe "relative [&>*]:h-full"

Note: Adding only relative or wrapping children in div doesn't seem right approach either as if you console, RadixPrimitive has children with class table, to which we have to give h-full; to access that children use [&>*]:h-full.

Hope this helps
Final code:

---

<ScrollAreaPrimitive.Viewport className="relative h-full w-full rounded-[inherit] [&>*]:h-full">
  {children}
</ScrollAreaPrimitive.Viewport>

---