CSS Sticky Sidebar

home tools rss | bitty CSS Sticky Sidebar This is my reference for how to make a non-responsive layout with a content area and a sticky sidebar. The HTML looks like this: <main> <h1>CSS Sticky Sidebar</h1> <div class="package-1"> <div class="content-1"> <!-- content goes here --> </div> <div class="sidebar-1"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> </ul> </div> </div> </main> The CSS Looks like this: :root { --sidebar-width: 14rem; } .package-1 { display: flex; align-items: flex-start; gap: 1.5rem; } .content-1 { flex: 1; min-width: 0; } .sidebar-1 { position: sticky; flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; } Details Flexbox makes child elements the same height by default. That would mean the sticky sidebar would take up the same height as the content which would end up with a…