角主机组件的高度不会根据IE11中的子高度而扩展

Question

从视觉上看，这是我的问题。第一张图片是所需的视图-Chrome可以很好地加载它。蓝色位于浅灰色内部。

第二张图片是IE加载它的方式。从图片中可能很难分辨出来，但是蓝色部分在浅灰色区域之外流动。这不是我想要的-它必须在里面。我尝试添加具有不同高度的简单div，但是无论如何，我都无法根据IE11中的内容来扩展灰色区域。

父组件：

HTML：<router-outlet></router-outlet>

CSS：

:host(.parent) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1;
    padding: 0 1rem;

    @media #{$medium-up} {
       flex-direction: row;
       padding: 0 40px;
    }
}

子组件：

HTML：

<div class="test">
  <form [formGroup]="formGroup" (ngSubmit)="onSubmit($event, formGroup.value)" class="form-content">
    <div class="sections">
      <div class="section">
        <ng-container *ngTemplateOutlet="welcomeTemplate"></ng-container>
      </div>
    </div>
  </form>
</div>

CSS：

:host(.child) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1;
    padding: 1rem;
    background-color: $color-background-light;
}

.test {
    background-color: blue;
    color: white;
}

如果有人有建议，将不胜感激。我一直在尝试弄清楚这一点，但我什么都无法工作。