how do I set the width to 100% of the current router outlet?

Question

My website has a menubar which is in the main component html and inside this html is also the app-selector of another component:

MainComponent.html

<div style="height:200px">This is my Menubar</div>
<app-test></app-test>

I would like to display 3 boxes in my testComponent.html.

I am using flexLayout: https://github.com/angular/flex-layout

 <div fxLayout="column" fxLayoutAlign="space-between none" style="height: 100%">
   <div style="background-color: red">
    T1
  </div>
  <div style="background-color: blue">
    T2
  </div>
  <div style="background-color: yellow; height: 200px">
    T3
  </div>
 </div>

The problem is that because there is a menubar, i get a scrolling behaviour but I just want the last box to end at my screen bottom. See here: http://prntscr.com/nhwcbp

How can I achieve this?

https://stackblitz.com/edit/flex-layout-angular-material-xssepa

Answer 1

1. put below style in style.css:

html, body { height: 100%; width: 100%; margin: 0; }

2. Remove height: 100vh and make use of flexbox

<div fxLayout="column" style="height:100%">
    <div fxLayout="row" fxLayoutAlign="center">
        <mat-card fxFlex="50">
            <div fxLayout="row">
                <div fxFlex="30" class="action-blurb">This is a blurb.</div>
                <div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
                <div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
            </div>
        </mat-card>
    </div>
    <div fxFlex="">
        <app-test></app-test>
    </div>
</div>

I hope this should do the trick as per this demo