Полоса прокрутки не отображается в мат-вкладках углового материала 6

Question

Я попытался добавить макет вкладок Angular Material в свой проект, и мне пришлось центрировать метки вкладок и их содержимое.Я использовал Angular Flex Layout для этого.Теперь проблема в том, что содержимое вкладок превышает высоту окна, но они недоступны, так как полоса прокрутки не отображается.

Я попытался добавить overflow: visible и overflow: выделите класс mat-tab-body, ноэто не помоглоМожет кто-нибудь помочь мне пройти через это?

Я использую Angular 6.0.8

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ProfileComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

.tile-content{
  margin-left: 20px;
  margin-top: 10px;
}

.tile-title{
  margin-left: 5px;
  font-weight: bold;
  margin-top: 20px;
}

.profile-image{
  width: 150px;
  height: 150px;
  margin-top: -100px;
  margin-left: 7.5%;
  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
  background-size: cover;
  border-radius: 50%;
}

.edit-icon{
  margin-top: 20px;
  margin-right: 20px;
}

.profile-name{
  color: white;
  margin-left: 20%;
  margin-top: 60px;
}

.btn-linkedin{
  margin: 10px;
}

.tab-group{
  margin-top: -100px !important;
  max-width: 70%;
}

.mat-tab-label {
  min-width: 120px !important;
  padding: 5px;
  background-color: transparent;
  color: white !important;
  opacity: 1;
  font-weight: 900;
}

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
  background-color: white;
}

mat-tab-header{
  margin-left: 100px;
}

mat-tab-body {
  overflow: visible !important;
}

<mat-grid-list cols="1" rowHeight="200px">
  <mat-grid-tile>
    <div style='background-image: url("https://gfnc1kn6pi-flywheel.netdna-ssl.com/wp-content/uploads/2018/05/shiba-inu-header.jpg"); z-index: -999; background-size: cover;' fxFlexFill>

      <div fxLayoutAlign="end start" fxLayout="row" class="btn-linkedin">
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png" width="36px">
        <button mat-flat-button color="accent">
          LinkedIn
        </button>
      </div>

      <h1 class="profile-name">
        Nick Fury
      </h1>

    </div>
  </mat-grid-tile>
</mat-grid-list>

<div class="profile-image"></div>

<mat-tab-group dynamicHeight fxLayout="column" fxFill fxLayoutAlign="start center" class="tab-group">

  <mat-tab fxFill>

    <ng-template mat-tab-label>
      Basic Info
    </ng-template>

    <div fxLayout="row" fxLayoutAlign="end start">
      <div fxFlex="none" class="edit-icon"> <mat-icon>create</mat-icon> </div>
    </div>

    <mat-grid-list cols="2" rowHeight="400px">
      <mat-grid-tile>

        <div fxLayout="column" fxLayoutAlign="start start" fxFlex>
          <div fxFlex="none" class="tile-title">Full Name</div>
          <div fxFlex="none" class="tile-content">Nick Fury</div>

          <div fxFlex="none" class="tile-title">Gender</div>
          <div fxFlex="none" class="tile-content">Male</div>

          <div fxFlex="none" class="tile-title">Email</div>
          <div fxFlex="none" class="tile-content">
            nick@gmail.com
            <button
              matSuffix
              mat-mini-fab>
              <mat-icon>email</mat-icon>
            </button>
          </div>

          <div fxFlex="none" class="tile-title">Skype ID</div>
          <div fxFlex="none" class="tile-content">nick.f</div>

          <div fxFlex="none" class="tile-title">Extension Number</div>
          <div fxFlex="none" class="tile-content">6510</div>

        </div>

      </mat-grid-tile>

      <mat-grid-tile>

        <div fxLayout="column" fxLayoutAlign="start start" fxFlex>
          <div fxFlex="none" class="tile-title">Entity</div>
          <div fxFlex="none" class="tile-content">CTS</div>

          <div fxFlex="none" class="tile-title">Designation</div>
          <div fxFlex="none" class="tile-content">Coordinator of Avengers</div>

          <div fxFlex="none" class="tile-title">Projects</div>
          <div fxFlex="none" class="tile-content">New York, Sokovia, Titan</div>

          <div fxFlex="none" class="tile-title">Location</div>
          <div fxFlex="none" class="tile-content">2nd Floor - 2nd Section</div>

          <div fxFlex="none" class="tile-title">Reporting Person</div>
          <div fxFlex="none" class="tile-content">Me</div>
        </div>

      </mat-grid-tile>
    </mat-grid-list>

    <div fxLayout="column" fxLayoutAlign="start start">
      <div fxFlex="none" class="tile-title">Summary</div>
      <div fxFlex="none" class="tile-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid at
        facere nemo nihil nostrum porro quaerat quam. Ad aliquid, animi, deleniti ducimus esse est nobis nulla
        atione suscipit tempora voluptates.
      </div>
    </div>

  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      Personal Info
    </ng-template>
    Content 2
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      Projects
    </ng-template>
    Content 3
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      Career
    </ng-template>
    Content 4
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      Education
    </ng-template>
    Content 5
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      Skills
    </ng-template>
    Content 6
  </mat-tab>

</mat-tab-group>