Css 材质Ui如何调整宽度以水平显示项目

我正在开发带有材质Ui的看板/Trello克隆应用程序，
我试图水平显示列并保持列的宽度相同。
所有列水平显示在同一行中。
如果列的显示区域需要扩展浏览器宽度，则显示区域宽度将自动调整。
问题是Material UI不允许我显示带有侧滚动的列。
如果我直接决定显示区域，比如宽度：2000。所有列均水平显示，
但总有多余的空间。
因为宽度是固定的，我们不知道用户创建了多少列。 这个问题的解决方案是什么？
这些是我尝试过的代码。

1/带网格的已包装子级

<Grid container style={{margin: 0,width: "100%"}}>
{children}
</Grid>

3/使用容器和网格

<Container className={classes.container}>
<Grid container direction='row' justify='flex-start' alignItems='flex-start'>
{children}
</Container >
</Grid >

onst useStyles = makeStyles({
  root: {
    display: "flex",
    justifyContent: "flex-start",
    alignContent: "center"
    // width: 20000,
    // overflowX: "auto"
  },
  container: {
    overflowY: "scroll",
    whiteSpace: "nowrap"
  }
});

{儿童}
onst useStyles=makeStyles({
根目录：{
显示：“flex”，
justifyContent:“灵活启动”，
内容：“中心”
//宽度：20000，
//overflowX：“自动”
},
容器：{
溢出：“滚动”，
空白：“nowrap”
}
});

请你放一个代码沙盒来显示你的问题，好吗？谢谢。由于我需要紧急解决这个问题，我通过不使用材料界面解决了这个问题。你能展示一个代码沙盒来显示你的问题吗？谢谢。因为我需要紧急修复这个问题，所以我通过不使用材质UI修复了这个问题。

<Container className={classes.container}>
<Grid container direction='row' justify='flex-start' alignItems='flex-start'>
{children}
</Container >
</Grid >

onst useStyles = makeStyles({
  root: {
    display: "flex",
    justifyContent: "flex-start",
    alignContent: "center"
    // width: 20000,
    // overflowX: "auto"
  },
  container: {
    overflowY: "scroll",
    whiteSpace: "nowrap"
  }
});