Javascript 如何保持材质UI表在动态高度下可滚动？

我对材质UI表组件及其大小和可滚动性有问题

简称： 如果材质UI表组件的父级具有固定大小，则该组件仅可滚动。如果我将大小设置为适合父对象100%，则会溢出

长： 我在Reactjs中有一个简单的WebApp，它由一个页眉、一个正文（表所在的位置）和一个页脚组成。“我的应用程序”组件的样式是分发这三个基本布局组件，如下所示：

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh",
    maxHeight: "100vh",
    display: "grid",
    gridTemplateRows: "auto 1fr auto",
  },
}));

<div className={classes.root}>
   <Controls /> //just some buttons, arranged in one line
   <Table /> //my table component, which uses pagination
</div>

那很好用。“我的身体”组件占用所有可用空间来填充整个视口。该组件如下所示：

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh",
    maxHeight: "100vh",
    display: "grid",
    gridTemplateRows: "auto 1fr auto",
  },
}));

<div className={classes.root}>
   <Controls /> //just some buttons, arranged in one line
   <Table /> //my table component, which uses pagination
</div>

表组件本身如下所示：

<div className={classes.root}>
      {loading ? loadingAlert : <></>}
      <Paper elevation={3} className={classes.tableRoot}>
        <TableContainer className={classes.container}>
          <Table size="small" stickyHeader aria-label="sticky table">
 [...]

{正在加载？正在加载文件：}
[...]

my Table组件的CSS如下所示：

root: {
    maxHeight: "100%",
    display: "grid",
    gridTemplateRows: "min-content 1fr",
    gap: "25px",
  },

const useStyles = makeStyles({
  root: {
    maxHeight: "100%",
  },
  tableRoot: {
    width: "100%",
    maxHeight: "100%",
  },
  container: {
    maxHeight: "100%", <---
  },
  footer: {
    display: "grid",
    gridTemplateColumns: "1fr min-content",
  },
});

const useStyles=makeStyles({
根目录：{
最大高度：“100%”，
},
tableRoot：{
宽度：“100%”，
最大高度：“100%”，
},
容器：{
最大高度：“100%”，