Пользовательский интерфейс VerticalTab Material React переполнен содержимым вкладок

Question

Я пытаюсь использовать этот компонент , но когда я помещаю контент, размер которого больше размера моей сетки, содержимое переполняется моей 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>?