Angular Material mat-drawer in full height flex, content overflow auto
Solution 1
In addition to @Sakkeer's working solution I found another way without hacking the position attribute but with usage of flex. Just add (not replace) the following css rules to the existing styles.
app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }
Solution 2
Try this for main css class
main {
position: absolute;
right: 0px;
left: 0px;
bottom: 0px;
top: 0px;
}
Solution 3
This worked for me!add it to style.scss
:
.mat-drawer-inner-container{ overflow: hidden !important; }
if it doesn't work for you, try below in style.scss
:
*{ overflow: hidden !important; }
Felix Lemke
We develop high performance enterprise web applications using latest technologies with focus on user experience. Contact us if we can help solving your software problem or if you want us to share our knowledge with your team by workshops and trainings. "We do not know what the rules of the game are; all we are allowed to do is to watch the playing." R. Feynman
Updated on July 27, 2022Comments
-
Felix Lemke almost 2 years
Yesterday I faced a CSS issue which seems to be related to
mat-drawer
and Angularsrouter-outlet
. I have got a fullpage flexbox with two children. Amat-toolbar
at the top and a custom componentapp-sidenav
at the bottom. This works fine and the app-sidenav fills the rest of the page since the flexbox is stretchy. Have a look at this simplified setting before continue:<div class="flex"> <mat-toolbar></mat-toolbar> <app-sidenav></app-sidenav> </div>
The related css is
.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; } mat-toolbar { flex: 0 0 auto; } app-sidenav { flex: 1 1 0; }
In the app-sidenav component I now have the following template
<mat-drawer-container> <mat-drawer></mat-drawer> <mat-drawer-content> <main><router-outlet></router-outlet></main> </mat-drawer-content> </mat-drawer-container>
And the related styles are
mat-drawer-container, mat-drawer-content { display: block; height: 100%; } main { height: 100%; overflow-y: auto; }
This works fine and the height is appropriate unless there is no content larger than the
app-sidenav
height. The scrollbar appears at the outer flexbox component and not at themain
-tag. I also tested!important
at the heights and also100vh
but with no success. So how can I get theoverflow-y
at the main tag working?I'm pretty sure that there is a simply trick, but I can't get it for know. Thanks for your help. Cheers!
Edit:
I made a stackblitz for this issue. When you navigate to the ciao component you see that the scrollbar appears at the document root and not in the main tag.
-
L1ghtk3ira over 5 yearsThis should get more upvotes. I tried many solutions but had no success. Did not think of trying to do flexbox like that.