mat-cell height not fill parent

Question

I'm using angular mat-table.

My problem is that mat-cell height is always 14px (inside content size), but I want to fix the mat-row height:

      <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="NAME">

        <mat-header-cell fxFlex="100%" class="my-mat-header" *matHeaderCellDef> 
          {{'NAME' | translate}} 
        </mat-header-cell>

        <mat-cell fxFlex="100%" class="my-mat-cell" *matCellDef="let element">
          {{ element.name }}
        </mat-cell>

      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns" class="my-mat-header-row"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" class="my-mat-row"></mat-row>
    </mat-table>

    .my-mat-row {
       min-height: 100%;
       border-bottom: none;
       padding: 5px 0;
    }

   .my-mat-cell {
     color: black;
     cursor: pointer;
     min-height: 100%;
   }

mat-row height is 50px, but mat-cell is only 14px.

how can it fill the parent height?

Answer 1

As matTable rows are flex container you should use this :

 .my-mat-row {
   ....
   align-items: stretch;
   ....
 }

This way all cell will stretch to take full height