App layout
Fill the screen under the header, keep the bottom padding on long pages and center short ones.
Example
Usage
Terminal
/* styles.css */@layer utilities { .flex-full { @apply flex min-w-0 flex-1 flex-col; }}
// main.tsx: the root is at least one screen tall<div className="isolate flex-full h-full min-h-dvh w-full"> <RouterProvider router={router} /></div>
// Layout route: the inset scrolls, the outlet grows with the page<SidebarProvider> <AppSidebar /> <SidebarInset className="flex h-full w-full flex-1 flex-col overflow-x-hidden"> <SiteHeader /> <div className="flex-full w-full p-3"> <Outlet /> </div> </SidebarInset></SidebarProvider>
// A page<main className="flex-full mx-auto w-full max-w-3xl gap-3">…</main>
// A centered state<div className="flex-full items-center justify-center"> <Empty>…</Empty></div>API reference
Classes
PropDescription
flex-fullflex min-w-0 flex-1 flex-colTakes the height left in a flex column and grows past it with its content.min-h-dvhroot shellKeeps every route at least one screen tall.h-fullSidebarInset onlyPins the scroll area to the screen. Leave it off the outlet and pages.Notes
- h-full on the outlet caps it at the screen, so long pages run past its bottom padding.
- flex-full has no min-h-0, so the outlet never shrinks below its content.
- Center a state with flex-full items-center justify-center. It fills the space under the header and never scrolls.