100% width with grids and tabs

[FizzBuzz791]

This is a bit tricky to replicate, but I'll update the issue with a plunkr if I manage to get it.

I have 3 tabs (bootstrap library - uib-tab) with a grid in each and css with width: 100%.
The horizontal scrolling sometimes is out of sync (i.e. header doesn't scroll but rows do) and seems quite similar to #2592. I don't think it's the same because when I look at the DOM in Chrome Dev Tools, I notice that the "broken" grid has .ui-grid-viewport { width: 100%0px; ... } which obviously doesn't work and seems to be the issue.

I'm not entirely sure why this happens. It seems like a bit of a race condition. I'm calling gridApi.core.refresh() and gridApi.core.handleWindowResize() on tab change, but it's not helping.

[FizzBuzz791]

Actually, this seems to be something odd with the width calculations. I still can't explain why 2 out of 3 grids work. The active tab works and one of the other 2 tabs randomly fails.

I have worked around the issue for now by doing the following;

.grid-class {
    left: 0;
    right: 0; // width: 100% causes scrolling issues, this acheives the same result with less issues.
    height: 500px;
}

gridoptions.excessColumns: 16; // Make this equal to gridOptions.columnDefs count

---

I'm still not a fan though. The "broken" grid still renders the horizontal scroll bar outside the container and then it moves (height gets re-calculated, properly) it to the correct location when clicked on.