Css 网格内容隐藏的材质UI垂直选项卡

当我添加网格和网格项时，垂直选项卡被覆盖，如下所示：，我希望内容能够实现这一点：。任何帮助都将不胜感激！我刚从材料界面开始

这是我的代码：

import React, { useState, useEffect } from "react";
import { Box, Grid, Tab, Tabs, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import Product from "../components/Product";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`vertical-tabpanel-${index}`}
      aria-labelledby={`vertical-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index) {
  return {
    id: `vertical-tab-${index}`,
    "aria-controls": `vertical-tabpanel-${index}`,
  };
}

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
    display: "flex",
    height: 500,
  },
  tabs: {
    borderRight: `1px solid ${theme.palette.divider}`,
  },
  productsContainer: {
    paddingTop: "20px",
    paddingLeft: "50px",
    paddingRight: "50px",
    margin: "auto",
  },
}));

const HomeScreen = () => {
  const [value, setValue] = React.useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  //UI
  const classes = useStyles();

  return (
    <React.Fragment>
      <div className={classes.root}>
        <Tabs
          orientation="vertical"
          variant="scrollable"
          value={value}
          onChange={handleChange}
          aria-label="Vertical tabs example"
          className={classes.tabs}
        >
          <Tab label="All Items" {...a11yProps(0)} />
          <Tab label="Hand" {...a11yProps(1)} />
          <Tab label="Skin" {...a11yProps(2)} />
          <Tab label="Face" {...a11yProps(3)} />
          <Tab label="Body" {...a11yProps(4)} />
          <Tab label="Fragrance" {...a11yProps(5)} />
          <Tab label="Home" {...a11yProps(6)} />
        </Tabs>
        <TabPanel value={value} index={0}>
          <Grid container spacing={4} className={classes.productsContainer}>
            {products.map((product) => (
              <Grid item xs={12} sm={10} md={6} lg={4} key={product._id}>
                <Product product={product} />
              </Grid>
            ))}
          </Grid>
        </TabPanel>
        <TabPanel value={value} index={1}>
          Item Two
        </TabPanel>
        <TabPanel value={value} index={2}>
          Item Three
        </TabPanel>
        <TabPanel value={value} index={3}>
          Item Four
        </TabPanel>
        <TabPanel value={value} index={4}>
          Item Five
        </TabPanel>
        <TabPanel value={value} index={5}>
          Item Six
        </TabPanel>
        <TabPanel value={value} index={6}>
          Item Seven
        </TabPanel>
      </div>
    </React.Fragment>
  );
};

export default HomeScreen;

import React，{useState，useffect}来自“React”；
从“@material ui/core”导入{方框、网格、制表符、制表符、排版}；
从“@material ui/core/styles”导入{makeStyles}”；
从“./部件/产品”进口产品；
功能选项卡面板（道具）{
const{children，value，index，…other}=props；
返回(
{value===索引&&(
{儿童}
)}
);
}
功能a11yProps（索引）{
返回{
id:`vertical tab-${index}`，
“aria控件”：“垂直选项卡面板-${index}”，
};
}
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
背景色：theme.palete.background.paper，
显示：“flex”，
身高：500，
},
选项卡：{
borderRight:`1px solid${theme.palete.divider}`，
},
产品容器：{
paddingTop：“20px”，
填充左：“50px”，
paddingRight:“50px”，
页边空白：“自动”，
},
}));
常量主屏幕=（）=>{
const[value，setValue]=React.useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
//用户界面
const classes=useStyles（）；
返回(
{products.map（（产品）=>(
))}
项目二
项目三
项目四
项目五
项目六
项目七
);
};
导出默认主屏幕；

如果您可以使用CodeSandbox创建演示，我可以提供帮助。非常感谢，这是指向沙盒的链接，您可以在选项卡样式中添加属性

溢出：可见：

。@m4n0您知道如何将侧选项卡固定在某个位置，以便在我上下滚动侧栏时保持固定状态吗？您可以尝试其中一种方法吗？