ag-grid won't scroll after rendering - ag-grid

Question

SOLVED: turns out I was importing the incorrect CSS which causes some pretty severe issues, read answer for more details
After implementing ag-grid, data is showing but I am unable to scroll at all.
I made a stackblitz here: https://stackblitz.com/edit/angular-ytr1jj.
The stackblitz works as expected but, for some reason, the exact same code fails to scroll in my app.
I have tried multiple ways of rendering the rows.
I have tried messing with the CSS to see if there is anything causing an overlap in the scrollbar.
so far no luck. I think it might have something to do with "pointer events"...
Update: I think that the virtual scroll requires the mouse event to be captured on the row, and for some reason the mouse event is not being captured and therefore can't scroll
<ag-grid-angular
#agGrid
style="width: 100%; height: 600px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
columnDefs = [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 }
];
UPDATE 2: I am able to get the scrollbar to scroll if i set pointer-events: none to .ag-center-cols-viewport. the html seems to be updating on scroll and the row-index row-id etc is updating as it scrolls, however the table view seems to not to not show the current rows being inserted into the ref="ag-center-cols-viewport" (they are appearing in the html but they are not visible)

Answer 1

ANSWER
okay so, this is a bit ridiculous but here it goes
BAD
#import "~ag-grid/dist/styles/ag-grid.css";
#import "~ag-grid/dist/styles/ag-theme-material.css";
GOOD
#import 'ag-grid-community/dist/styles/ag-grid.css';
#import 'ag-grid-community/dist/styles/ag-theme-material.css';
After checking my package.json again I noticed I had 3 things of ag-grid under dependencies
"ag-grid",
"ag-grid-angular",
"ag-grid-community"
The CSS I was importing was from the old version of "ag-grid".
After removing "ag-grid" from package.json I imported the proper CSS and everything worked immediately...
Final Good Code
// package.json
"ag-grid-angular": "^20.0.0",
"ag-grid-community": "^20.0.0",
// _vendor.scss where I import most my node_modules css
// #import "~ag-grid/dist/styles/ag-grid.css";
// #import "~ag-grid/dist/styles/ag-theme-material.css";
#import 'ag-grid-community/dist/styles/ag-grid.css';
#import 'ag-grid-community/dist/styles/ag-theme-material.css';