How to set mat-drawer-container, mat-drawer and mat-drawer-content height responsive based on content?

Question

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.

https://stackblitz.com/edit/angular-mat-drawer-s1vgwr?

Answer 1

Start from following!

<mat-drawer fxFlex #drawer mode="side"
        style="display: inline-table; overflow: auto; position: fixed; margin-top: 75px">

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.