Body cell won't overflow if consumer has given width

src/app/public/modules/grid/fixtures/grid.component.fixture.ts

@@ -88,7 +88,7 @@ export class GridTestComponent {
     }),
     new ListItemModel('7', {
       column1: '21',
-      column2: 'Grape',
+      column2: 'Some long text that would provoke an overflow of monster proportions!',
       column3: 21,
       column4: moment().add(7, 'minute')
     })

src/app/public/modules/grid/grid.component.html

@@ -83,7 +83,9 @@
               [fieldSelector]="column.field"
               [item]="item"
               [columnId]="column.id"
-              [attr.sky-cmp-id]="column.id || column.field">
+              [attr.sky-cmp-id]="column.id || column.field"
+              [style.max-width.px]="column.width"
+              [style.width.px]="column.width">
             </sky-grid-cell>
           </td>
         </tr>

src/app/public/modules/grid/grid.component.spec.ts

@@ -248,6 +248,16 @@ describe('Grid Component', () => {
         }
       }
     }
+
+    function verifyConsumerColumnWidthsAreMaintained() {
+      for (let i = 0; i < component.grid.displayedColumns.length; i ++) {
+        let col = component.grid.displayedColumns[i];
+        if (col.width) {
+          let colEl = element.queryAll(By.css('thead th'))[i];
+          verifyWidthsMatch(colEl.nativeElement.offsetWidth, col.width);
+        }
+      }
+    }
     //#endregion
 
     describe('standard setup', () => {
@@ -411,6 +421,10 @@ describe('Grid Component', () => {
         }
       });
 
+      it('should maintain column width when provided by consumer', () => {
+        verifyConsumerColumnWidthsAreMaintained();
+      });
+
       it('should pass accessibility', async(() => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {