Why blank cells when you define a max-height on the grid?

[binarykitchen]

I am seeing blank cells. Why?

I am defining a max-height for the grid in CSS, the vertical scrollbar works fine, yet seeing blank cells when scrolling down. See screenshot.

On CSS level, I set the max-height like that:

 max-height: calc( 100vh - 300px);

On UI side, I return the DataGrid with these props:

  return (
    <DataGrid
      aria-label={label}
      className="data-grid"
      columns={columns}
      defaultColumnOptions={{
        sortable: true,
      }}
      onSortColumnsChange={onSortColumnsChange}
      rows={sortedData}
      rowHeight={40}
      rowKeyGetter={rowKeyGetter}
      sortColumns={sortColumns}
    />
  );

Just curious why the cells are blank?

[binarykitchen]

Figured it out with the elimination method:

The CSS property row-gap is the root cause.

row-gap 10px

Remove it, and all works fine. Worth to document.