By Default mat-drawer-container/mat-sidenav-container and mat-drawer/mat-sidenav height is based on mat-drawer-content/mat-sidenav-content, but I would like to set the mat-drawer height based on its own content and the mat-drawer-container height to set based on either mat-drawer or mat-drawer-content whichever is more. My mat-drawer content will be dynamic based on user input, is there any direct way to do it in angular material?
The link below is a demo app for more clarity.
i)when I use height:100vh Iam getting full view height with a scroll bar (which is not interesting).
ii)if I use host:mat-drawer-container:100px it doesn't accept fit-content or 100% as values and not accepting max-height:500px.
iii) Tried { provide: MAT_DRAWER_DEFAULT_AUTOSIZE, useValue: { autosize: true } } but mat drawer isn't visible when mat-drawer-content is empty and eventhough mat-drawer have a list of items in it.
Start from following!
Keep adjusting until your requirement is met. Easiest way to test would be using browser dev tools and adjusting css from there. This is what I followed for a project, would like to know others' ideas as well.