Hi folks, I have what I would think is a simple situation but I'm scratching my head and hope that I'm missing something obvious.

I have a grid that has 3 columns. The grid is in a dialog component. I want the grid to fill  the width of the dialog but also have my 3 columns fill the width of the grid. One of the columns needs to be more narrow than the others.

The behavior I'm seeing is that when I resize the dialog using a CSS transform the "grid" resizes with it, regardless of if I call reflow or not, but the column "container" doesn't.

What I mean by this is that the columns don't resize with the grid so I tried manually changing the column sizes when the transition occurs and found that the column somewhat resizes but all of the graphical elements related to the column don't change so it looks like the column didn't resize but the data moved as if it did.

Here is what it looks like if I don't resize the columns manually (note that the red border is to show the size of the grid):

Here is what it looks like if I resize manually after transform:

Here is my grid and column definition:

<igx-grid id="dummyId" *ngIf="dummyCondition" #dummyNameForViewChild [data]="dummyDataSet"
                  [allowFiltering]="false"  width="100%" style="border: solid 1px red;">
          <igx-column width="75">
            <ng-template igxCell let-cell="cell" let-row="row" >
              <button igxButton="icon" (click)="removeRow(cell.cellID.rowIndex, cell)">
                <igx-icon>delete</igx-icon>
              </button>
            </ng-template>
          </igx-column>
          <igx-column [field]="'BlockDate'" [header]="'Date'" [editable]="false" [sortable]="true"
                      [resizable]="true" [formatter]="dateFormatter" [dataType]="Date" >
          </igx-column>
          <igx-column [field]="'BlockSize'" [header]="'# Rooms'" [editable]="true" [sortable]="true"
                      [resizable]="true" [dataType]="number" >
            <ng-template igxCell let-cell="cell">
              {{cell.value}}
            </ng-template>
            <ng-template igxCellEditor let-cell="cell">
              <input type="number" name="inputEHBDays" [(ngModel)]="cell.gridAPI.get_cell_inEditMode(cell.gridID).cell.editValue" />
            </ng-template>
          </igx-column>
        </igx-grid>

Any suggestions on how I can achieve this functionality?