VerticalTab Material React UI 被标签内容溢出答案

【问题标题】：VerticalTab Material React UI is overflowing by tab contentVerticalTab Material React UI 被标签内容溢出
【发布时间】：2020-08-05 13:53:48
【问题描述】：

我正在尝试使用this component，但是当我放置的内容大于我的网格大小时，内容会溢出我的 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>？

【问题讨论】：

标签： html css material-ui

【解决方案1】：

这实际上取决于设备大小。它也发生在材料 ui doc 中的示例中（https://codesandbox.io/s/kxsqg?file=/demo.js）发生这种情况是因为 .MuiTabs-root 类中的 overflow: hidden 属性。覆盖它应该可以解决问题。

【讨论】：