title: Not all rows are shown on Material-UI DataGrid
body: <p>I'm working on a React project using Material UI and I'm facing quite an annoying problem with the DataGrid component (version 4.0.0-alpha.23).</p>
  <p>I have a DataGrid table inserted into a Box component (set with an height of <code>70vh</code>). Not all rows are shown on a given page, and the number of rows rendered changes as  window's height changes. E.g., there are 10 rows. On page loading, default rows-per-page is 5 and the table correctly shows 5 rows on the first page (but table's height is bigger, so there is a trailing &quot;blank&quot; content after the last row). If I change the rows-per-page to 10, only 8 rows are shown, and there is no scroll bar to show the remaining ones. If I make the browser window smaller, the number of rows shown changes and a scroll bar appears, anyway it is still impossible to see all the rows. So the problem is not just the lack of a scroll bar but also the fact that the actual number of rows shown per page doesn't coincide with the <code>pageSize</code> parameter value.</p>
  <p>I'd like to point out that I have never used React nor Material UI, and I'm new to frontend developing in general, so maybe this is a stupid problem with a straightforward solution, so forgive me for the probably silly question. Anyway, I hope you could help me.</p>
  <p>Here's a code example:</p>
  <pre><code>&lt;Box className={classes.grid}&gt;
    &lt;DataGrid
    rows={rows}
    columns={columns}
    pageSize={5}
    rowsPerPageOptions={[5, 10, 15]}
    headerHeight={42}
    /&gt;
  &lt;/Box&gt;
  </code></pre>
  <p>grid class is like below:</p>
  <pre><code>grid: {
    padding: theme.spacing(0, 0, 2),
    width: '100%',
    height: '70vh',
    '&amp; .MuiDataGrid-columnsContainer': { backgroundColor: '#000', color: '#fff' },
    '&amp; .MuiDataGrid-row': {
      '&amp;:nth-of-type(odd)': {
        backgroundColor: theme.palette.action.hover,
      },
    },
    '&amp; .MuiDataGrid-columnSeparator': { display: 'none' },
    '&amp; .MuiIconButton-root': { color: '#fff !important' },
    '&amp; .MuiTablePagination-actions &gt; .MuiIconButton-root': { color: '#000 !important' },
    '&amp; .MuiDataGrid-root .MuiDataGrid-menuIcon': { visibility: &quot;visible&quot; },
    '&amp; .MuiDataGrid-row': { maxHeight: &quot;none !important&quot;, },
    '&amp; .MuiDataGrid-root .MuiDataGrid-cellWithRenderer[data-field=&quot;ItemsId&quot;]': { lineHeight: '20px !important' },
    '&amp; .MuiDataGrid-cell.MuiDataGrid-cellWithRenderer.MuiDataGrid-cellLeft': { maxHeight: 
    &quot;none !important&quot; },
    '&amp; .MuiDataGrid-cell.MuiDataGrid-cellLeft': { maxHeight: 'none !important', display: 
    'flex', alignItems: 'center' }
  },
  </code></pre>