mat-sidenav-container,
mat-sidenav-content,
mat-sidenav {
    height: 100%;
}

mat-sidenav {
    width: 300px;
}

main {
    padding: 5px;
}

.layout-wrapper {
    height: 100%;
}

.flex-wrapper {
    height: 100%;
}

.HeaderMainFooterComponent {
    padding: 0 0 0; // no extra padding -> padding is calculated in the child comp
    margin: 0; // see above
    overflow: hidden; // overflow hidden => all "to big" child components are hidden
    display: grid; // we define a grid
    width: 100%; // 100 % view width (hardware screen)
    height: 100%; // 100% view height
    grid-template-areas:
        'head'
        'main'
        'foot'; // 3 Rows
    grid-template-rows: auto minmax(0, 1fr) auto; // row relationships
    grid-template-columns: minmax(0, 1fr); // column relationship
}

.HeaderComponent {
    margin: 0 5px 0 5px; // padding around the header
//    padding: 5px; // padding around the header
    top: 0; // component + padding = top line
    left: 0; // component + padding = left line
    right: 0; // component + padding = right line
    // ==> with these 3 informations we knew that the component will be stretched at the top of the view
    grid-area: head; // grid area: auto height 1fr width
}

.MainComponent {
    grid-area: main;
    overflow: hidden;
}

.FooterComponent {
    grid-area: foot;
    margin: 0 5px 0 5px;
}
