Autoheight in MUI DataGrid

I'm using the MUI DataGrid component, and the behavior I hope to have is that:

1. When there's a small number of rows, the table is only the size it needs to for those rows.
2. When there's a large number of rows, more than the current viewport can hold (given whatever else is on the screen), the table takes up the available space in the layout (given its flex: 1) and the extra rows scroll inside the table.

I can achieve each of these behaviors, but only one at a time.

1. If I use the autoHeight property on the DataGrid, then the table will be as small as it can be. BUT it will also be as big as it can be, so with a large number of rows the container scrolls the entire table, rather than the rows scrolling within the table.

2. If I don't use autoHeight, and wrap the DataGrid in a container with flex: 1, then the table will grow to fill the available space and the rows will scroll within the table. BUT a table with only a few rows will also grow to fill its container, so that there is empty space under the rows (above the footer, "Table rows: #")

You can see the situation in this screenshot, showing the exact same page, with different data.

I've tried what feels like every permutation of heights and flexes under the sun. For example:

• Setting autoHeight with a maxHeight (and .MuiDataGrid-main { overflow: scroll; } ) allows few-rows to be small, and many-rows to be not too small, but obviously any discrete maxHeight, be it px or %, is not the flexible layout I'm going for.
• Turning off autoHeight (as in scenario #2) and setting flex-grow: 0 on the rows container within the table (.MuiDataGrid-main) just makes the rows disappear since they then shrink to a height of 0.

The code for the component:

const S = {
  Wrapper: styled.div`
    width: 100%;
    display: flex;
    flex: 1;
    background: white;
    border: solid thick red;
  `,
  DataGrid: styled(DataGridPro)`
    && {
      .MuiDataGrid-main {
        //overflow: scroll;
        //flex-grow: 0;
      }
      background: lightgreen;
      font-size: 14px;
    }  
`,
};

type Props = {
  columns: ReadonlyColumns;
  rows: AnyObject[];
  filterModel?: GridFilterModel;
} & Omit<DataGridProps, 'columns'>;

const DataTable: React.FC<Props> = ({
  columns = [],
  rows = [],
  filterModel,
  className,
  ...props
}) => {
  const memoizedColumns = useMemo(
    () =>
      columns.map(col => ({
        headerClassName: 'columnHeader',
        flex: 1, // all columns expand to fill width
        ...col, // but could override that behavior
      })),
    [columns],
  );

  return (
    <S.Wrapper className={className}>
      <S.DataGrid
        // autoHeight
        rows={rows}
        columns={memoizedColumns}
        filterModel={filterModel}
        {...props}
      />
    </S.Wrapper>
  );
};