How to use nested flexboxes with Angular components?

问题

I want to make all components added in through the router-outlet take up all of the available height and width of the page using flexboxes. Thanks to ToolmakerSteve's answer to the "how to make nested flexboxes work", I know that it is possible to achieve the desired results using the following basic HTML and CSS:

HTML:

<div id="flexbox-outer">
  <div id="flexbox-middle">
    <div id="flexbox-inner">    
    </div>
  </div>
</div>

CSS:

html, body {
  height : 100%; 
  width  : 100%;
}
.flexbox-outer {
  display        : flex;
  flex-direction : column;
}
.flexbox-middle {
  flex           : 1;
  display        : flex;
  flex-direction : column;
}
.flexbox-inner {
  flex: 1;
}

However, when I apply those classes to a basic Angular application, the div with the flex-box-inner class does not take up the entire height of the page as desired. Below is an example of the code that is not working (and a stackblitz of the issue):

index.html and app.component.html (combined here):

<html>
<body>
  <app-root>
    <div class="flexbox-outer">
      <div class="flexbox-middle">
        <router-outlet></router-outlet>
      </div>
    </div>
  </app-root>
</body>
</html>

foo.component.html:

<div class="flexbox-inner">
  This should take up the entire width and height of the page.
</div>

How can I get the contents of the foo.component.html template to take up the entire height of the page?

回答1:

After some inspection, I learned that components added through the router-outlet do not replace the router-outlet, but rather add their own hosting element at the same level of the router-outlet. So, the document structure that I thought was rendered like so:

<html>
<body>
  <app-root>
    <div class="flexbox-outer">
      <div class="flexbox-middle">
        <!-- Removed, and replaced with contents of foo.component.html? -->
        <!--            <router-outlet></router-outlet>                 -->
        <div class="flexbox-inner">
          This should take up the entire width and height of the page.
        </div>
      </div>
    </div>
  </app-root>
</body>
</html>

Was actually rendered like this:

<html>
<body>
  <app-root>
    <div class="flexbox-outer">
      <div class="flexbox-middle">
        <router-outlet></router-outlet>
        <foo>
          <div class="flexbox-inner">
            This should take up the entire width and height of the page.
          </div>
        </foo>
      </div>
    </div>
  </app-root>
</body>
</html>

So, to make this all work and have the contents of foo.component.html fill the height of the page, I just needed to add the flexbox-middle class to the host element of the FooComponent like so:

@Component({
  selector    : 'app-foo',
  templateUrl : './foo.component.html',
  host        : { 'class': 'flexbox-middle' }
})
export class FooComponent { }

The full code for the working result is available here.