[data grid] Scroll issue when maxHeight is set

[Vignesh1326]

  const minHeight = 200;
  const maxHeight = 400;
  return (
    <div style={{ position: 'relative' }}>
      <Paper
        sx={{
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          maxHeight,
          minHeight,
        }}
        data-testid="listing-table"
      >
        <DataGrid
          columnVisibilityModel={{
            responses: showResponsesColumn,
            actions: isPermissionExistsInStorage(
              'Feature.LAM.FaaS.Form.Write',
              applyPermissions
            ),
          }}
          sx={{
            '.MuiDataGrid-columnHeaderTitle': {
              fontSize: '14px !important',
            },
            '.MuiDataGrid-columnHeader, .MuiDataGrid-scrollbarFiller--header': {
              backgroundColor:
                theme?.palette?.mode === 'light' ? '#eeeeff' : '#232229',
            },
            '.MuiDataGrid-cell': {
              borderRight: '1px solid var(--rowBorderColor) !important',
            },
            '& .MuiDataGrid-row--firstVisible': {
              '--rowBorderColor': 'var(--DataGrid-rowBorderColor) !important',
            },
            '& .MuiDataGrid-columnHeader': {
              borderRight:
                '1px solid var(--DataGrid-rowBorderColor) !important',
            },
            '& .MuiDataGrid-columnHeader--last': {
              borderRight: 'none !important',
            },
            '& .MuiDataGrid-columnHeaderTitle': {
              fontWeight: 600,
              textTransform: 'uppercase',
              fontSize: '12px',
            },
            '& .MuiDataGrid-cell:last-child': {
              borderRight: 'none !important',
            },
          }}
          pageSizeOptions={[15, 20, 25]}
          paginationModel={paginationModel}
          paginationMode="server"
          onSortModelChange={(model) => handleModelChange(model, 'sort')}
          onPaginationModelChange={(model) =>
            handleModelChange(model, 'paginate')
          }
          rowCount={totalCount}
          rowSelection={false}
          disableColumnResize
          disableColumnMenu
          rows={tableData}
          columns={tableAttributes}
          loading={loading}
        />
      </Paper>
    </div>
  );

Im using mui x data grid free version, I have data from my server and whenever i change pagination, api is called and data is refetched. Now here I have the data grid to have a maxWidth. When I have more data content and when it exceeds maxWidth I need to get scroll bar. Im getting the scroll bar, but when i scroll, scroll is not happening. Can someone please resolve my issue?

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.