bug(mat-sidenav): sidenav really does break position: sticky

[chrissena]

Reproduction

Use StackBlitz to reproduce your issue:

• Components: https://stackblitz.com/edit/components-issue-jfapkp?file=src%2Fapp%2Fexample-component.html

Steps to reproduce:

1. Add a sticky element inside a mat-sidenav-content
2. Element will not stick to the top of the screen
3. Unsetting display: block on mat-sidenav-container fixes this but breaks the sidenav itself

This is a copy of #16443 but that issue is locked due to inactivity so I have created this.

@jelbourn's answer:

(revisiting older issues as part of a triaging fix-it)

The problem here is that you're not actually scrolling the mat-sidenav-content element- the body element is scrolling. The way position: sticky works is that it's sticky relative to its containing element, so when the body scrolls instead, the entire mat-sidenav-content is being scrolled through the body. You can see this manifest by adding a smaller height to mat-sidenav-content and scrolling.

This doesn't make sense to me as I was under the impression that this is how position: sticky is intended to work.
See: CSS Position Sticky - How It Really Works!
specifically this codepen example

As you can see in the codepen example, the body is scrolling and taking the main element with it. The HEADER div (which has position: sticky set) sticks to the top (within the bounds of the main element).

Is this not analogous to the mat-sidenav stackblitz example above, with the mat-sidenav-content element acting like main? It seems as though sidenav is breaking the position: sticky and preventing it from working as intended.

Expected Behavior

Header div Element to stick to top when scrolling down

Actual Behavior

Header div scrolls out of view

Environment

• Angular: 12
• CDK/Material: 12
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

I think that what @jelbourn said in #16443 is correct: the element being scrolled is the body, not the sidenav container which is potentially scrollable due to the overflow: auto. This is why sticky doesn't work. You can prove this by setting height: 100vh on the container, making it the scrollable element.

As for the Codepen example, you can break it by setting overflow: auto on the main content, similarly to what we're doing on the sidenav container.

[crisbeto]

Closing since there hasn't been any feedback. The issue can be reopened if we get more information.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}