Угловая высота основного узла не будет расширяться в зависимости от высоты дочернего элемента в 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;
}

Если у кого-то есть предложения, они будут очень благодарны.Я пытался понять это немного сейчас, и я не могу заставить что-либо работать.