mat-cell 高度不填充父级答案

【问题标题】：mat-cell height not fill parentmat-cell 高度不填充父级
【发布时间】：2018-03-12 19:58:14
【问题描述】：

我正在使用角度垫表。

我的问题是 mat-cell 高度总是 14px（内容大小），但我想修复 mat-row 高度：

      <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 高度是 50px，但是 mat-cell 只有 14px。

如何填充父级高度？

【问题讨论】：

标签： css angular angular-material2

【解决方案1】：

由于 matTable 行是 flex 容器，你应该使用这个：

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

这样所有单元格都会拉伸到全高

【讨论】：

非常感谢！我一直在努力尝试我知道的每一个 css hack 并尝试重新学习 flexbox，而这正是我所需要的。（不过过去 3 小时 RIP）