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)
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.