Fixed chrome, scrolling content — SaaS interior pages.

The pattern#

html
<body class="flex h-screen overflow-hidden">
  <aside class="w-60 border-r">nav</aside>
  <div class="flex flex-1 flex-col">
    <header class="h-14 border-b">topbar</header>
    <main class="flex-1 overflow-y-auto p-6">scrolls alone</main>
  </div>
</body>

Responsive behavior#

Every pattern here is breakpoint-agnostic at its core — add sm:/md:/lg: prefixes to the grid/flex containers to tune when it collapses. Because the primitives are utilities, responsiveness is a prefix, never a rewrite.

When to use#

  • SaaS interiors
  • Admin panels
  • IDEs

patterns/index|All patterns · utilities/grid/grid-template-columns|Grid · utilities/flexbox/flex-direction|Flexbox