Why doesn't <table mat-table> apply flexbox properties?

Question

In my template I have,

...
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
...

In my template style I have

...
.mat-column-name {
  color: red;
  // flex: 0 1 200px !important; // not getting applied
  max-width: 200px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
...

I wanted to control column width. But when using flex property in mat-column-name, it doesn't get applied. As a workaround I am using max-width. It kind of works, but I don't understand how max-width is getting used to make it responsive

Edit: Working code Stackblitz Demo

Answer 1

Use <mat-table ... instead of <table mat-table... for flexbox to kick in

I was using

<table mat-table ...
...
<ng-container ...
    <th ..
    <td ..
...

Instead I need to change to

<mat-table ...
<ng-container ...
    <mat-header-cell ...
    <mat-cell ...
...

Your flex: 0 1 200px; CSS property will become active as mat-row's display type is flex now.

See https://material.angular.io/components/table/overview#tables-with-display-flex