Css Safari未将最小高度：100%规则应用于div

我对Safari的布局有一个问题，它有两个div，最小高度为100%

我在Next.js上使用Material UI，布局在抽屉中（实际上，相同的布局用于两个不同的抽屉，一个是永久的，一个是临时的，以覆盖所有类型的设备）

我试图获得的布局如下所示：

我是这样做的（CSS道具是其中的一部分，并且工作得非常好）

常量抽屉内容=（）=>{
返回(
{/*必须粘贴到顶部的内容*/}
{/*必须粘贴到底部的内容*/}
);
}

这在Chrome和Firefox上运行得很好，但在Safari上不行，因为

minheight:100%

的网格没有其父网格高，因为没有应用minheight规则

任何帮助都将不胜感激

谢谢

<Drawer
  variant="permanent"
  css={{
    ".MuiDrawer-paper": {
      width: R.dimens.drawerWidth,
      height: `calc(100% - ${appbarHeight}px)`,
      top: appbarHeight,
      scrollbarWidth: "none",
      "::-webkit-scrollbar": {
        display: "none"
      }
    }
  }}
>
  <DrawerContents />
</Drawer>

const DrawerContents = () => {
  return (
    <div css={{ minHeight: "100%" }}>
      <Grid
        container
        direction="column"
        justify="space-between"
        css={{ minHeight: "100%" }}
      >
        <Grid item>
          {/* The contents that has to stick to top */}
        </Grid>
        <Grid item>
          {/* The contents that has to stick to bottom */}
        </Grid>
      </Grid>
    </div>
  );
}