Материальная карточка со свитком перепуталась

Question

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

Проблема более конкретна в Chrome на ОС Windows. В инспекторе хрома, если я поставлю display:block это исправляет. но из кода display:flex; не переопределяется. Вот как это выглядит сейчас:

 <mat-card>
                        <mat-card-title class="card-title"  style="padding-top:10px">Smart Alerts</mat-card-title>
                        <mat-card-content>
                              <div fxLayout="column" style="max-height:330px;overflow-y: auto;display: block!important;">

                                    <div fxLayout="column" *ngFor="let opty of optys">
                                         <div class="widget-para-title" style="padding-left:0px;margin-top:0px">{{opty.name}}</div>
                                          <div class="widget-para-text" style="font-weight: normal">{{opty.account}}</div>
                                          <div style="font-weight: normal;color:black" *ngIf="opty.recommendedAction.length > 0">{{opty.recommendedAction[0].title}}</div>
                                    </div>

                              </div>
                        </mat-card-content>
</mat-card>

Обсуждаемая строка:

  <div fxLayout="column" style="max-height:330px;overflow-y: auto;display: block!important;">