我试图建立一个React Jmeter 板与MUI。它与AppBar和抽屉和内容区域是一个框（请纠正任何错误的框与指定的规格是一个完美的方法）。

但我面临的问题是，我不能使容器占位符，这是框本身伸展其高度的网页的全部高度。
这是我的tsx

export default function RootContainer() {
  const [open, setOpen] = React.useState(false);
  const title="Manage Recipes";
  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };
  const DrawerHeader = styled('div')(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  }));
  const drawerWidth = 240;

const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
  open?: boolean;
}>(({ theme, open }) => ({
  flexGrow: 1,
  padding: theme.spacing(3),
  transition: theme.transitions.create('margin', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  marginLeft: `-${drawerWidth}px`,
  ...(open && {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 0,
  }),
}));

  return (
    <Box sx={{ display: 'flex', bgcolor:"silver",height:"100vh" }}>
      <CssBaseline />
      <AppBar open={open} onDrawerOpen={handleDrawerOpen}  />
      <Drawer open={open} onDrawerClose={handleDrawerClose} />
      <Main open={open} >
        <DrawerHeader />
        <Container maxWidth="xl">
        <h2>{title}</h2>
        <Paper elevation={1} sx={{bgcolor:"#f7f9ff", height:"100%"}}>
          <ManageRecipe />
        </Paper>
             
</Container>
      </Main>
     

    </Box>
  );
}

我怎样才能达到全高（而不是全宽）

*****根据答案更新

根据答案，我已经更新了页面，父级现在工作正常。它可以伸展到全尺寸，没有滚动。
但是这两个子元素造成了一些麻烦，因为它仍然不是完整的高度。
所以我像这样更新了子容器

<Container  maxWidth="xl" sx={{margin:"20", bgcolor:"red", height:1}}  >
      <h2>{title}</h2>
      <Paper elevation={1} sx={{bgcolor:"#f7f9ff", height:1/2}}>
        <ManageRecipe />
      </Paper>
         
    </Container>

现在它看起来像是子容器像这样从父容器中流出，我希望容器保持在父容器中，底部填充为20px。但是它没有...请帮助