title: Angular component inside of router-outlet on child route will not fill available space
body: <p>My application's root <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> will display the following component in a child Module when navigating to the '/child' route:</p>
  
  <h2>child.component.ts</h2>
  
  <pre><code>import {Component} from "@angular/core";
  
  @Component({
    template: `
      &lt;div style="display:flex; width: 100%; height: 100%;"&gt;
        &lt;custom-sidebar-component&gt;&lt;/custom-sidebar-component&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;`
  })
  export class ChildComponent {
  }
  </code></pre>
  
  <p>Now this component displays just fine and fills the entire screen as I expected. However, when I attempt to navigate to a child route of this module, say to '/child/home', I expect the following HTML to display in the child <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> seen in the component template above.</p>
  
  <h2>child-home.component.html</h2>
  
  <pre><code>&lt;style&gt;
    .parent-style {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      height: 100%;
    }
  
    .box-style {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      background: red;
      color: white;
      border: 1px solid black;
    }
  &lt;/style&gt;
  &lt;div class="parent-style"&gt;
    &lt;div class="box-style"&gt;Box 1&lt;/div&gt;
    &lt;div class="box-style"&gt;Box 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this time the contents of the router-outlet do not fill the available space as I was hoping. The only way I have been able to see the results I want is to open dev tools and edit the Angular generated _nghost attribute wrapping my component.  How can I get my component to fill available space?</p>
  
  <h2>This is what I expect</h2>
  
  <p><a href="https://i.stack.imgur.com/dlkH1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dlkH1.png" alt="expected"></a></p>
  
  <h2>This is what I actually get</h2>
  
  <p><a href="https://i.stack.imgur.com/mhODj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mhODj.png" alt="enter image description here"></a></p>