Mui TabList overflowing when wrapped inside a grid - reactjs

Question

In the code below the tabs are overflowing past the visible width after wrapping in the TabsWrapper. I have a use case where the tabs will always be rendered in a similar wrapper. Is it possible to override some styles in ScrollableTabs to achieve the default behaviour?
I'm getting the feeling that there should be a fix as this seems like a common use case w.r.t to CSS Grid and Flex.
Just in case you aren't familiar with the default behaviour, try rendering ScrollableTabs without it being wrapped in the TabsWrapper.
import React from "react";
import { TabContext, TabPanel, TabList } from "#mui/lab";
import { Box, Tab, Stack } from "#mui/material";
/** Cannot be changed */
function TabsWrapper(props) {
return (
<div style={{ display: "grid", gridAutoFlow: "row" }}>{props.children}</div>
);
}
/** Cannot be changed */
function MyTabList(props) {
return (
<Stack direction="row">
<TabList
orientation="horizontal"
variant="scrollable"
onChange={props.onChange}
>
{props.children}
</TabList>
</Stack>
);
}
/** Can be changed */
export default function ScrollableTabs() {
const tabValues = [...Array(30)].map((_, index) => String(index + 1));
const [tab, setTab] = React.useState("1");
const handleChange = (_, newValue) => {
setTab(newValue);
};
return (
<TabsWrapper>
<TabContext value={tab}>
<MyTabList onChange={handleChange}>
{tabValues.map((value) => (
<Tab label={`Tab ${value}`} value={value} key={value} />
))}
</MyTabList>
<Box>
{tabValues.map((value) => (
<TabPanel value={value} key={value}>
Tab content {value}
</TabPanel>
))}
</Box>
</TabContext>
</TabsWrapper>
);
}
Working codesandbox - https://codesandbox.io/s/mui-custom-scrollable-tabs-2mfcjr
Thanks!

Answer 1

Wrapping TabContext in <div style={{ overflow: "hidden" }}> fixes the issue.
The ScrollableTabs jsx should look like -
export default function ScrollableTabs() {
const tabValues = [...Array(30)].map((_, index) => String(index + 1));
const [tab, setTab] = React.useState("1");
const handleChange = (_, newValue) => {
setTab(newValue);
};
return (
<TabsWrapper>
<div style={{ overflow: "hidden" }}>
<TabContext value={tab}>
<MyTabList onChange={handleChange}>
{tabValues.map((value) => (
<Tab label={`Tab ${value}`} value={value} key={value} />
))}
</MyTabList>
<Box>
{tabValues.map((value) => (
<TabPanel value={value} key={value}>
Tab content {value}
</TabPanel>
))}
</Box>
</TabContext>
</div>
</TabsWrapper>
);
}
Working codesandbox - https://codesandbox.io/s/mui-custom-scrollable-tabs-forked-6ycqfv