title: mat-table how to align mat-header with the mat-cell width
body: <p>I'm new with flex and I have quite made good with my mat-table.
  Unfortunately my header is not following my cell width. </p>
  
  <p>Here's  a picture of my result.</p>
  
  <p><a href="https://i.stack.imgur.com/GhnQW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GhnQW.png" alt="enter image description here"></a></p>
  
  <p>As you see my header is not align with my cell. </p>
  
  <p>Here's my CSS code, Like I said I'm new, so maybe I missed something.</p>
  
  <pre><code>@import "./../../styles.scss";
  
  
  .mat-header-row {
      width: 100%;
    min-height: 20px;
    padding: 0px 0px 0px 4px;
  }
  
  .mat-row {
      width: 100%;
    min-height: 12px;
    display: inline-flex;
   // min-width: 100%;
  }
  
  .mat-header-cell {
    justify-content: left;
    font-size: smaller;
    font-weight: bold;
    padding: 0px 0px 0px 4px;
  }
  
  .mat-cell {
    justify-content: left;
    border-top: 1px solid crimson;
    font-size: smaller;
    padding: 0px 0px 0px 4px;
    text-align: left;
    align-items: flex-start;
  }
  
  .mat-cell-points {
    flex: 0 0 20px !important;
    white-space: unset !important;
  }
  
  .mat-cell-concession{
      flex: 0 0 200px !important;
      white-space: unset !important;
    justify-content: left;
    border-top: 1px solid crimson;
    font-size: smaller;
    padding: 0px 0px 0px 4px;
    text-align: left;
  }
  
  .rcorner1 {
    border-radius: 25px;
    background: mat-color($accent, 300);
    padding: 20px;
  }
  
  .example-container {
    display: flex;
    flex-direction: column;
  
    // min-width: 200px;
    max-width: 380px;
  }
  
  
  label {
    min-width: 15%;
  }
  
  .mat-row:nth-child(1n + 1) {
      background-color: mat-color($accent, lighter);
    }
  
    .mat-row:not(:nth-child(2n + 1)) {
      background-color: mat-color($primary, 300);
    }
  
  .example-element-row:hover {
    background: mat-color($accent, 800);
  }
  .example-element-row:active {
    background: #efefef;
  }
  </code></pre>
  
  <p>And my HTML code:</p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8 alternate-theme mat-app-background" color="primary"&gt;
      &lt;div class="mat-header-cell"&gt;
          {{ this.getTypeInfo(this.typeList.TypeBourse) }}
      &lt;/div&gt;
      &lt;mat-table [dataSource]="bourseDetail" class="mat-elevation-z8"&gt;
          &lt;!-- https://stackoverflow.com/questions/53084892/angular-material-table-cell-formatting/53096778 --&gt;
          &lt;!-- Position Column --&gt;
          &lt;ng-container matColumnDef="Position"&gt;
              &lt;mat-header-cell *matHeaderCellDef matTooltip="Position"&gt; # &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;{{ element.Position }}&lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Concession Column --&gt;
          &lt;ng-container matColumnDef="nom"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt;Concession&lt;/mat-header-cell&gt;
              &lt;mat-cell class="mat-cell-concession" *matCellDef="let element"&gt;
                  &lt;ng-container *ngIf="element.Concession.Nom; else elseBlock"&gt;
                      {{ element.Concession.Nom }}
                      &lt;ng-template #elseBlock&gt;Content to render when condition is false.&lt;/ng-template&gt;
                  &lt;/ng-container&gt;
              &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Points Column --&gt;
          &lt;ng-container matColumnDef="Points"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt;points&lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;{{ element.Points }}&lt;/mat-cell&gt;
  
          &lt;/ng-container&gt;
  
          &lt;!-- Amount Column --&gt;
          &lt;ng-container matColumnDef="Montant"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt;Gain&lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;{{ element.Montant | currency }}&lt;/mat-cell&gt;
  
          &lt;/ng-container&gt;
  
          &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef="let row; columns: displayedColumns" class="example-element-row"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for your help</p>