我正在使用MUI DataGrid组件，我希望具有的行为是：
1.当行数较少时，表的大小仅为这些行所需的大小。
1.当存在大量行，超过当前视口可以容纳的行（给定屏幕上的其他内容）时，表将占用布局中的可用空间（给定其flex: 1），并且额外的行将在表内滚动。
我可以实现这些行为中的每一个，但一次只能实现一个。
1.如果我在DataGrid上使用autoHeight属性，那么表将尽可能小，但是它也将尽可能大，所以对于大量的行，container 滚动整个表，而不是在表中滚动行。
1.如果我不使用autoHeight，而是将DataGrid Package 在flex: 1的容器中，那么表将增长以填满可用空间，并且行将在表中滚动。但是只有几行的表也将增长以填满其容器，因此行下面是空的空间（在页脚上方，“Table rows：#”）
您可以在此屏幕截图中看到这种情况，显示完全相同的页面，但数据不同。

我试过在阳光下各种不同的高度和弯曲度。例如：

• 使用maxHeight（和.MuiDataGrid-main { overflow: scroll; }）设置autoHeight允许少行小，多行也不太小，但显然任何离散的maxHeight，无论是px还是%，都不是我想要的flex布局。
• 关闭autoHeight（如场景2）并在表中的行容器上设置flex-grow: 0（.MuiDataGrid-main）只会使行消失，因为它们随后会收缩到高度为0。

组件的代码：

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>
  );
};