Search code examples
htmlcssscrolloverflow

Allow nested child to overflow with scroll instead of main content

Minimal repro

I've got a sidebar where the overflow-y: scroll doesn't want to behave. The goal is to keep both the main content and the sidebar at the full height of the viewport, but force the sidebar to scroll instead of the main content.

Solution

  • Just add overflow-y: hidden; to the .sidebar.

    Also height: calc(100vh - 30px); on .main

    example