Using Ellipsis in Angular Material Table

By default, Angular Material Table puts content in a new line below if it overflows from the cell it is contained in. I'm trying to set it so that the overflowing text gets truncated with "..." instead. The code I have right now doesn't truncate the content and displays it in one line until it overflows out of the parent <div>

I'm using <table mat-table> instead of <mat-table> because it has columns that resize themselves based on their content as described in Angular Material Website. The table I'm trying to create is responsive and resizes itself based on the size of its parent <div>

HTML:

<div class="table-content">
  <table mat-table [dataSource]="dataSource" class="table-container">
    <ng-container [matColumnDef]="item" *ngFor="let item of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>{{item}} </th>
      <td mat-cell *matCellDef="let element">
        <div class="table-data-content">
          <span>{{element[item]}}</span>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

CSS:

.table-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.table-data-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Sample data used in Angular Component:

  dataSource = [
    { Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long'},
    { Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long'}
  ];

  displayedColumns = ['Name', 'Date', 'Uploader'];

What could I fix to appropriately use ellipsis in my table?

Update: The ellipsis works if I add the following css, which I am still not sure why.

td {
max-width: 0px;
}

However, this approach disrupts the way Angular Material Table efficiently assigns the width of each column based on the length of the content so that the content gets truncated when the other column still has a lot of empty space left. Is there better solution to this?