Angular router-outlet child can't fill space

angular, angular-flex-layout, angular-routing, angular-ui-router, angular2-routing

Solution

I found a way. The router-outlet is hidden and the component added on DOM have the attribute `fxFlexFill` for filling all available space.

<div fxLayout="column" fxFlexFill>
  <maat-top-bar class="top-bar"></maat-top-bar>
  <div fxFlex>
   <router-outlet class="hidden-router"></router-outlet>
  </div>
</div>

The class `hidden-router`

.hidden-router {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}

And the component

<div fxFlexFill="">
  I filling all remaining space
</div>

Problem

I have a problem with filling all available space with the router-outlet. I use angular/flex-layout for my application. And the component loaded with the router doesn't take all available place. ``` <div fxLayout="column" fxFlexFill> <maat-top-bar></maat-top-bar> <router-outlet fxFlex></router-outlet> </div> ``` Screenshot of app & dom The router-outlet take space instead of child component. On screenshot the component is `<maat-home></maat-home>`. In the DOM tree this component is placed after the router-outlet. What can I do so the component `<maat-home></maat-home>` will take the remaining space? Thanks!

Original source