Angular parent router cannot fill in space

Question

I had a problem filling up all available space with a router.

I am using angular / flex-layout for my application. And the component loaded by the router does not take up all the space.

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

Screenshot of application and dom

A router exit takes up space instead of a child component. In the screenshot of the component <maat-home></maat-home>. In the DOM tree, this component is located after the router exits.

What can I do to make the component <maat-home></maat-home>take up the remaining space?

Thank!

Answer 1

. - , , DOM, fxFlexFill .

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

hidden-router

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

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

Answer 2

fxFlex <router-outlet>, , , . , , , <router-outlet>