Я пытаюсь использовать этот компонент , но когда я помещаю контент, размер которого больше размера моей сетки, содержимое переполняется моей VerticalTab, как вы можете видеть в this codesandbox Вот что я попробовал:
return (
<div className={classes.root}>
<Tabs
orientation="vertical"
variant="scrollable"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
className={classes.tabs}
>
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
<Tab label="Item Four" {...a11yProps(3)} />
<Tab label="Item Five" {...a11yProps(4)} />
<Tab label="Item Six" {...a11yProps(5)} />
<Tab label="Item Seven" {...a11yProps(6)} />
</Tabs>
<TabPanel value={value} index={0}>
<Grid container>
<Grid item xs={6}>
ELemento 1 sadasdasdasdasdadadad
</Grid>
<Grid item xs={6}>
Elemento 2 sadasdasdasdasdasdasd dsadasdasdsadasdsadasdadaddsadasd
</Grid>
</Grid>
</TabPanel>
<TabPanel value={value} index={1}>
Item one
</TabPanel>
</div>
);
Как видите, содержимое моего <Grid>
переполняет мое <Tabs>
. Есть другой элемент, который я должен поставить вместо <Grid>
?