Angular component inside of router-outlet on child route will not fill available space

My application's root <router-outlet></router-outlet> will display the following component in a child Module when navigating to the '/child' route:

child.component.ts

import {Component} from "@angular/core";

@Component({
  template: `
    <div style="display:flex; width: 100%; height: 100%;">
      <custom-sidebar-component></custom-sidebar-component>
      <router-outlet></router-outlet>
    </div>`
})
export class ChildComponent {
}

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 <router-outlet></router-outlet> seen in the component template above.

child-home.component.html

<style>
  .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;
  }
</style>
<div class="parent-style">
  <div class="box-style">Box 1</div>
  <div class="box-style">Box 2</div>
</div>

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?

This is what I expect

This is what I actually get