Detailed explanation
Implement this with two separate responsibilities: Grid or Flexbox creates the columns, while position: sticky controls the sidebar’s scrolling behaviour. For a genuinely full-height sidebar, give it the available viewport height, not height: fit-content. The supplied example creates a content-height sticky sidebar; it does not make the sidebar full height. Sticky positioning keeps the element in normal document flow, unlike position: fixed, so the main column does not need a manual offset to avoid overlapping it.
A practical Grid implementation is: .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; } .sidebar { position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; box-sizing: border-box; }. Use semantic markup such as a layout wrapper containing an aside and a main element. minmax(0, 1fr) lets the main column shrink without its intrinsic content width forcing the grid wider. align-self: start prevents the sidebar from stretching to match a tall grid row, leaving room for sticky movement.
Under the hood, sticky positioning applies an offset relative to the nearest ancestor scrollport, while keeping the sidebar constrained by its containing block. With normal document scrolling and no intervening scroll container, the sidebar stays at the viewport’s top until it reaches its containing block’s bottom boundary. The containing block must provide enough vertical space for this behaviour to be observable. Ancestors with overflow: auto, scroll, or hidden can change which scroll container sticky uses, even when that ancestor does not visibly scroll. Therefore, inspect the complete ancestor chain when debugging.
For a persistent header, use top: var(--header-height) and height: calc(100dvh - var(--header-height)). The dvh unit follows the dynamic viewport height; 100vh can be a fallback for older browsers. Internal overflow lets users reach sidebar items when they exceed the available height. If only main has its own scrolling container, its sibling sidebar already stays still, so sticky may be unnecessary. On narrow screens, switch to one column and usually reset the sidebar to position: static and height: auto.
Key points to remember
- Use Grid or Flexbox for the two-column layout; sticky does not create columns.
- Set position: sticky and a non-auto inset such as top: 0.
- Use viewport-based height for a full-height sidebar; fit-content only sizes it to its content.
- Prevent vertical stretching and ensure the containing block provides room for sticky movement.
- Handle header offsets, sidebar overflow, ancestor scroll containers, and mobile layouts explicitly.
Common mistakes candidates make
- Calling height: fit-content a full-height solution, or using height: 100% without a definite parent height.
- Forgetting top or allowing layout stretching to leave no room for sticky movement.
- Adding overflow to ancestors without checking whether it changes the scroll container used by sticky.
Likely follow-up questions
How is sticky different from fixed positioning?
Sticky preserves the element’s place in normal flow and remains constrained by its containing block. Fixed positioning removes the element from flow and usually positions it relative to the viewport, so adjacent content may need reserved space.
What changes when using Flexbox instead of Grid?
Use display: flex on the wrapper, flex: 0 0 250px on the sidebar, and flex: 1; min-width: 0 on main. Keep align-self: flex-start on the sidebar along with the same sticky, height, and overflow rules.
How would you debug a sidebar that does not stick?
Check its computed position and top values, then inspect ancestor overflow settings to identify the relevant scroll container. Also verify that the sidebar is not stretched and that its containing block is taller than the sidebar, providing room for movement.
Interview tip: Explain the layout first, show the sticky and viewport-height rules, then clarify which element scrolls and how you handle overflow.