Tailwind - Fixed sidebar, scrollable content

gistfile1.txt

// Source: https://twitter.com/calebporzio/status/1151876736931549185

<div class="flex">
    <aside class="h-screen sticky top-0">
        // Fixed Sidebar
    </aside>
    
    <main>
        // Content
    </main>
</div>

<div class="grid grid-cols-7">
    <aside class="self-start sticky top-0 col-span-1">
        // Fixed Sidebar
    </aside>
    
    <main class="col-span-6">
        // Content
    </main>
</div>

This is perfect

te amo

If you have a different colored sidebar and want it to expand to the full height, add h-full to your grid:

<div class="grid grid-cols-7 h-full">
    <aside class="self-start sticky top-0 col-span-1 bg-stone-50">
        // Fixed Sidebar
    </aside>
    
    <main class="col-span-6">
        // Content
    </main>
</div>