Problem making a flex item scrollable

[samin-safaei]

Hello every one. I had an issue to get scroll-able content inside flex box:

<div fxFlexFill fxLayout="row" fxLayoutAlign="start stretch"style="overFlow: auto;">
  <div fxFlex fxLayout="column">
    <div fxFlexFill fxLayout="row" class="main-content" style="overFlow: auto; background-color: #888;">
      <div fxFlex fxLayout="row wrap" fxLayoutGap="5px grid">
        <mat-card *ngFor="let item of contentItems" fxFlex="25">
          <mat-card-header>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-title>Shiba Inu</mat-card-title>
            <mat-card-subtitle>Dog Breed</mat-card-subtitle>
          </mat-card-header>
          <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
          <mat-card-content>
            {{item.name}}
          </mat-card-content>
          <mat-card-actions>
            <button mat-icon-button mat-raised-button color="primary">
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button mat-raised-button color="warn">
              <mat-icon>more_horiz</mat-icon>
            </button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>
  </div>
  <div fxFlex="35" >
    <div fxFlexFill fxLayout="column" fxLayoutAlign="start stretch" >
      <div fxFlex fxLayout="row" fxLayoutAlign="start start" class="main-content" style="overFlow: auto; ; background-color: blue;">
        <div fxFlex>
          <mat-card *ngFor="let item of contentItems">
            {{item.name}}
          </mat-card>
        </div>
      </div>
    </div>
  </div>
</div>

I can't get two main-content divs to have vertical scroll-able content inside parent. The main issue is I don't know how to constraint height to fill parent (when parent is suppose to fill the remaining area).

Also I had another issue with dynamic flex size. I wanted the main area to get bigger when changing flex size. The first main-content div doesn't seem to change size.
Both issues are available in this stackblitz

[CaerusKaru]

I understand your frustration, but this is an issue tracker, not a support forum. Better avenues for support include Gitter and StackOverflow.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}