Sheet component not displaying when using flex flex-col h-screen in layout

Question

I'm learning React + TailwindCSS + shadcn/ui.

I'm trying to open a Sheet component (a popover/modal), but it doesn't show up when I wrap my page content in a flex container like this:

function App() {
  return (
    <>
      <div className='flex flex-col h-screen'>
        <div className='flex-1 overflow-auto'>
          {currentPage == 'home' &&
          <Home />}
          {currentPage == 'rank' &&
          <Rank />}
          {currentPage == 'message' &&
          <Message />}
          {currentPage == 'profile' &&
          <Profile />}
        </div>
      </div>
      <Sheet>
        <SheetTrigger asChild>
          <Button>
            open
          </Button>
        </SheetTrigger>
        <SheetContent className="z-[9999]">
          <SheetHeader>
            <SheetTitle>OK</SheetTitle>
            <SheetDescription>good</SheetDescription>
          </SheetHeader>
          <div className="border-t my-2" />
        </SheetContent>
      </Sheet>
    </>
  )
}

However, if I remove the <div className="flex flex-col h-screen">, the Sheet displays correctly.

Why does this happen, and how can I fix it without removing the flex layout?

rozsazoltan · Accepted Answer · 2025-07-24 08:28:00Z

The flex layout has complicated rendering behavior. I couldn't reproduce the exact error, but I think you need to provide a parent component that is not flex.

function App() {
  return (
    <div className="relative h-screen">
      <div className='flex flex-col h-full'>
        <div className='flex-1 overflow-auto'>
          {currentPage == 'home' &&
          <Home />}
          {currentPage == 'rank' &&
          <Rank />}
          {currentPage == 'message' &&
          <Message />}
          {currentPage == 'profile' &&
          <Profile />}
        </div>
      </div>
      <Sheet>
        <SheetTrigger asChild>
          <Button>
            open
          </Button>
        </SheetTrigger>
        <SheetContent className="z-[9999]">
          <SheetHeader>
            <SheetTitle>OK</SheetTitle>
            <SheetDescription>good</SheetDescription>
          </SheetHeader>
          <div className="border-t my-2" />
        </SheetContent>
      </Sheet>
    </div>
  )
}

XMDCode · Accepted Answer · 2025-07-25 14:40:30Z

0

Because of the

flex h-screen

doesn't leave room for sheet to open so it doesn't get any height.

Either include inside parent div or remove the flex.

answered Jul 25 at 14:40

XMDCode

513 bronze badges

Collectives™ on Stack Overflow

Sheet component not displaying when using flex flex-col h-screen in layout

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related