Angular material 2 card scroll able

Question

how to make the content inside the mat-card material 2 component scroll able ? I did not find anything on the material 2 website

Answer 1

This is not a built-in feature. To make the contents scrollable, set a height for <mat-card-content> selector. Here is an example:

<mat-card>
    <mat-card-header>
        <mat-card-title>CARD TITLE</mat-card-title>
    </mat-card-header>
    <mat-card-content [style.overflow]="'auto'" [style.height.px]="'300'">
        <p>
            The Shiba Inu is the smallest of the six original and distinct
            spitz breeds of dog from Japan. A small, agile dog that copes very
            well with mountainous terrain, the Shiba Inu was originally bred
            for hunting.
        </p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
    </mat-card-actions>
</mat-card>

Link to StackBlitz demo.

Answer 2

You can leverage Flexbox to achieve this:

Add a class scrollable-content to your mat-card to make the content fill the card.

.mat-card.scrollable-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;

  > .mat-card-title-group {
    display: block;
  }

  > .mat-card-content {
    overflow-y: auto;
  }
}

<mat-card class="scrollable-content">
  <!-- the rest of your inner html -->
</mat-card>