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

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?