title: ag-grid won't scroll after rendering
body: <p><strong>SOLVED: turns out I was importing the incorrect CSS which causes some pretty severe issues, read answer for more details</strong> </p>
  
  <p>After implementing ag-grid, data is showing but I am unable to scroll at all.</p>
  
  <p>I made a stackblitz here: <a href="https://stackblitz.com/edit/angular-ytr1jj" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ytr1jj</a>.
  The stackblitz works as expected but, for some reason, the exact same code fails to scroll in my app.<a href="https://i.stack.imgur.com/Awdxx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Awdxx.png" alt="enter image description here"></a></p>
  
  <p>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.
  <a href="https://i.stack.imgur.com/nyTc3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nyTc3.png" alt="bar is inaccesible"></a></p>
  
  <p>so far no luck. I think it might have something to do with "pointer events"...</p>
  
  <p><strong>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</strong></p>
  
  <pre><code>&lt;ag-grid-angular
    #agGrid
    style="width: 100%; height: 600px;"
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    &gt;
  &lt;/ag-grid-angular&gt;
  
  
  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 }
    ];
  </code></pre>
  
  <p><strong>UPDATE 2: I am able to get the scrollbar to scroll if i set <code>pointer-events: none</code> to <code>.ag-center-cols-viewport</code>. 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)</strong></p>