igx-grid - on IE11, misalignment between column headers and cells happens when the total width of the columns is shorter than the grid width.

[tkiryu]

Description

On IE11, misalignment between column headers and cells happens when the total width of the columns is shorter than the grid width.

• igniteui-angular version: 6.2.0
• browser: IE11

Steps to reproduce

1. Run the attached sample on IE11.

Result

Misalignment between column headers and cells happens.
Here is screenshots.

• IE11 has a problem.
  

• Chrome is OK
  

Expected result

Misalignment between column headers and cells should not happen.

Attachments

igx-grid.zip

[tkiryu]

The behavior of igx-grid-header is OK thanks to max-width.
https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/grid-header.component.ts#L73-L75

On the other hand, the behavior of igx-grid-cell is not good. It doesn't have max-width, which causes the problem.
https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/cell.component.ts#L381-L382

[tkiryu]

I found the root cause. flex-basis and box-sizing don't work well together on IE11. Please see the following link.
https://stackoverflow.com/questions/37353792/flex-basis-and-box-sizing

[SAndreeva]

@tkiryu, we are currently making some refactoring that tends to fix similar issues. Thanks for the deep observations and the help!