Angular - высота списка выбора матов в гибком макете

Question

У меня есть контейнер гибкого макета с несколькими элементами в ряд. Один из них - список выбора матов с почти 50 значениями. Я попытался ограничить высоту списка выбора матов в CSS. Действительно, размер списка выбора матов изменен правильно, но высота страницы остается в соответствии с реальной высотой списка выбора матов (с 50 элементами).

Вот мой css:

.container {

      display: flex;
    }

.class_radio_group {
    flex-direction: column;
}

mat-selection-list {
    max-height: 4%;
    overflow-y:scroll;
    overflow-x: hidden;
    }

Вот мой html:

      <div class="container" fxLayout="row">
        <div fxFlex="49">

          <mat-radio-group class="class_radio_group">
            <mat-radio-button value="1" >Value 1</mat-radio-button>
            <mat-radio-button value="2" >Value 2</mat-radio-button>
          </mat-radio-group>
        </div>

        <div fxFlex="2"></div>

        <div fxFlex="49">
          <mat-selection-list dense [multiple]="false" >
            <mat-list-option *ngFor="let val of valList" [value]="val">
              {{val}}
            </mat-list-option>
          </mat-selection-list>

        </div>
      </div>

Не могли бы вы помочь мне понять, что происходит? Заранее спасибо.