子路由上路由器出口内部的角度组件将无法填充可用空间

我的应用程序的根 <router-outlet></router-outlet>

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 {
}

现在,这个组件显示得很好,像我预期的那样填充了整个屏幕。然而,当我尝试导航到此模块的子路径时,比如说“/child/home”,我希望在子路径中显示以下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>

但这次路由器出口的内容并没有像我希望的那样填满可用空间。我能够看到我想要的结果的唯一方法是打开开发工具并编辑包装我的组件的角度生成的_nghost属性。如何让组件填充可用空间?

这就是我所期望的