bug(MatTable): *matNoDataRow not properly styling in flex mode #22349

Reproduction

• https://stackblitz.com/edit/components-issue-table-flex-no-data-row

Steps to reproduce:

1. Use *matNoDataRow in a flex MatTable

Expected Behavior

No Data Row is properly styled with a padding, like in the non-flex table:

Actual Behavior

No Data Row is missing proper styling:

Additional information

The code for the *matNoDataRow in non-flex tables is part of the documentation:

<tr class="mat-row" *matNoDataRow>
  <td class="mat-cell" colspan="4">No data</td>
</tr>

But how to do it with the flex table? I've tried several things, no luck so far:

<div class="mat-row" *matNoDataRow>
  <div class="mat-cell">No data</div>
</div>

<div *matNoDataRow>No data</div>

<div mat-row *matNoDataRow>
  <div mat-cell>No data</div>
</div>

<mat-row *matNoDataRow>
  <mat-cell>No data</mat-cell>
</mat-row>

Sure I could add the styles manually, but I was hoping that there was an official solution.

Environment

• Angular: 11
• CDK/Material: 11
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): all