Угловой контент не будет прокручиваться

Имейте простое окно содержимого angular, содержащее отзывчивую группу значений настроек. Когда окно сворачивается, fxLayout сворачивается просто отлично, но я не могу заставить его прокручиваться по вертикали. Я пробовал overflow-y и просто overflow (оба с прокруткой), но когда контент опускается ниже окна, его невозможно увидеть.

Есть ли какой-то другой CSS, который мне не хватает?

Спасибо....

карточный компонент:

   <div class = "card">
      <div class = "title">{{title}}</div>
      <div class = "description">
        <ng-content></ng-content>
      </div>
   </div>

css карты:

.card {
  border-radius: 10px;
  border: 2px solid #bbb;
  margin: 10px 10px 30px 10px;
  padding: 10px;
  overflow-y: scroll;
}
.card .title {
  border-bottom: 1px solid #fff;
  font-weight: 100;
  font-size: 2.5em;
  margin-bottom: 5px;
}
.card .description {
  font-weight: 300;
  font-size: 1.2em;
}

html-контент:

<card fxLayout = "column" fxLayoutAlign = "center center">
  <h2>Settings</h2>
      <div fxLayout = "column " >
    <h2>General</h2>
    <div class = "icon-form-field" fxFlex = "50" >
      <mat-icon color = "accent">add_location</mat-icon>
      <mat-form-field fxFlex = "100">
        <mat-select [placeholder] = "Wing"
                    [ngModel] = "settings.wing"
                    (selectionChange) = "onWingSelect($event)"
                    name = "Wing">
          <mat-option *ngFor = "let w of wings" [value] = "w.value">
            {{w.label}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div fxLayout = "column" fxFlex = "50" >
      <div class = "icon-form-field" >
        <mat-icon color = "accent">my_location</mat-icon>
        <label>Default Map Location</label>
        <span class = "flex-spacer"></span>
        <mat-radio-group>
          <mat-radio-button value = "norCal" [checked] = "settings.norCalMapCenter" (change) = "onNorCalMapSelect($event)">NorCal</mat-radio-button>
          <mat-radio-button value = "soCal" [checked] = "settings.soCalMapCenter" (change) = "onSoCalMapSelect($event)">SoCal</mat-radio-button>
        </mat-radio-group>
      </div>
    </div>
<div class = "input-row" fxLayout = "row" fxLayout.lt-md = "column" fxLayoutGap = "20px" fxLayoutGap.lt-md = "0px">
      <div class = "icon-form-field" fxFlex = "50" >
            <mat-icon color = "accent">view_day</mat-icon>
            <label class = "slider-label input-lg" style = "align-self: center">Sticky Header</label>
            <span class = "flex-spacer"></span>
            <mat-slide-toggle
              [checked] = "settings.stickyHeader"
              (change) = "onStickyHeaderToggle($event)">
            </mat-slide-toggle>
        </div>
        <div class = "icon-form-field" fxFlex = "50"  >
          <mat-icon class = "md-14" color = "accent">timeline</mat-icon>
          <label class = "slider-label input-lg" style = "align-self: center">Display Breadcrumbs</label>
          <span class = "flex-spacer"></span>
          <mat-slide-toggle
            [checked] = "settings.displayBreadcrumbs"
            (change) = "onDisplayBreadcrumbsToggle($event)">
          </mat-slide-toggle>
        </div>
    </div>
    <div class = "input-row" fxLayout = "row" fxLayout.lt-md = "column" fxLayoutGap = "20px" fxLayoutGap.lt-md = "0px">
      <div class = "icon-form-field" fxFlex = "50" >
            <mat-icon color = "accent">check_circle_outline</mat-icon>
            <label class = "slider-label input-lg" style = "align-self: center">Clear Checkboxes on Open</label>
            <span class = "flex-spacer"></span>
            <mat-slide-toggle
              [checked] = "settings.clearCheckboxesOnOpen"
              (change) = "oncClearCheckboxesOnOpenToggle($event)">
            </mat-slide-toggle>
        </div>
        <div class = "icon-form-field" fxFlex = "50"  >
          <mat-icon class = "md-14" color = "accent">terrain</mat-icon>
          <label class = "slider-label input-lg" style = "align-self: center">Display Legend</label>
          <span class = "flex-spacer"></span>
          <mat-slide-toggle
            [checked] = "settings.displayLegend"
            (change) = "onDisplayLegendToggle($event)">
          </mat-slide-toggle>
        </div>
    </div>


    <div class = "input-row" fxLayout = "row" fxLayout.lt-md = "column" fxLayoutGap = "20px" fxLayoutGap.lt-md = "0px">
      <div fxLayout = "column"  fxFlex = "50" >
          <h2>Themes</h2>
            <div class = "icon-form-field" fxFlex = "50" >
              <mat-icon color = "accent">brush</mat-icon>
              <mat-form-field fxFlex = "100">
                <mat-select [placeholder] = "Theme"
                            [ngModel] = "settings.theme"
                            (selectionChange) = "onThemeSelect($event)"
                            name = "Theme">
                    <mat-option *ngFor = "let t of themes" [value] = "t.value">
                                      {{t.label}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
          </div>
          <div class = "icon-form-field" fxFlex = "50" >
            <mat-icon color = "accent">brightness_medium</mat-icon>
            <label class = "slider-label input-lg" style = "align-self: center">Auto night mode (from 21:00 to 7:00) </label>
            <span class = "flex-spacer"></span>
            <mat-slide-toggle
              [checked] = "settings.autoNightMode"
              (change) = "onAutoNightModeToggle($event)">
            </mat-slide-toggle>
          </div>
        </div>


        <div fxLayout = "column" fxFlex = "50">
            <h2>Animations</h2>
          <div class = "icon-form-field" fxFlex = "50" >
              <mat-icon color = "accent">input</mat-icon>
              <label class = "slider-label input-lg" style = "align-self: center">Navigation whole page transition </label>
              <span class = "flex-spacer"></span>
              <mat-slide-toggle
                [checked] = "settings.animateWholePageTransition"
                (change) = "onAnimateWholePageTransitionToggle($event)">
              </mat-slide-toggle>
          </div>
          <div class = "icon-form-field" fxFlex = "50" >
            <mat-icon color = "accent">open_in_browser</mat-icon>
            <label class = "slider-label input-lg" style = "align-self: center">Navigation page elements slide up</label>
            <span class = "flex-spacer"></span>
            <mat-slide-toggle
              [checked] = "settings.pageElementsSlideUp"
              (change) = "onPageElementsSlideUpToggle($event)">
            </mat-slide-toggle>
          </div>
        </div>
      </div>

    </div>

    <button class = "mat-raised-button" routerLink = "/home"     (click) = "close()">Close</button>
  </card>

снимок экрана: