Unable to make an element's position sticky in a mat-drawer-container

Question

I'm having a problem with a div using position: sticky; inside mat-drawer-container. Here's what I've tried:

.mat-drawer-container.my-drawer-container {
    overflow: scroll;
}

.mat-drawer-content.my-drawer-content {
    overflow: scroll;
}

with no luck :(

Any thoughts?

This doesn't work

https://stackblitz.com/edit/angular-aqk1oj-pg4xq8

This works (the desired result)

https://stackblitz.com/edit/angular-aqk1oj

Answer 1

In your example, the class names used in the template and styles do not match. Once that is corrected you will see that overflow: scroll undesirably gives two scrollbars within the container.

The default value for the overflow property in the mat-drawer-container and mat-drawer-content classes is hidden. When overflow: hidden is set to any ancestor of a sticky element, the ancestor element will become the scrolling container. To avoid this, simply unset the overflow property.

.mat-drawer-container.my-mat-drawer-container {
    overflow: unset;
}

.mat-drawer-content.my-mat-drawer-content {
    overflow: unset;
}

The div will now be sticky.