[ELEMENTS] If grid is in hidden container and widths are in % an error is thrown.

[MayaKirova]

Description

It's a grid with 100% width, columns also have widths in % and some are hidden.

• igniteui-angular version:
• browser:

Steps to reproduce

1. Run the attached sample:
   7f51fceb-a63e-45af-bf04-0dfbe720ec4d.zip

Error is thrown: Maximum call stack size exceeded

Result

Page hangs and error is thrown.

Expected result

No error is thrown.

Attachments

[MayaKirova]

Same happens in a pure angular grid as well, you just have to have width:100% and columns in % with sum is less than 100.
The problem is that when in a hidden container, actual size is 0, so grid width is calculated based on the sum of visible columns. However the columns are then calculated as % of the grid width, hence on each iteration a new size is calculated and things go in an infinite loop.

Here's an angular sample with the scenario as well:
ntiwjqa9.zip