Material-Ui Как настроить ширину для отображения элементов по горизонтали

Question

Я работаю над приложением kanban / Trello clone с Material-Ui,
Я пытался отображать столбцы по горизонтали и сохранять столбцы одинаковой ширины.
Все столбцы отображаются горизонтально в одной строке.
Если область отображения для столбцов требует увеличения ширины браузера, ширина области отображения автоматически настраивается.
Проблема заключается в том, что пользовательский интерфейс материала не позволяет отображать столбцы с боковой прокруткой.
Если я определил область отображения напрямую, как ширина: 2000. все столбцы отображаются горизонтально,
, но всегда есть избыточное пространство.
Поскольку ширина фиксирована, и мы не знаем, сколько столбцов создают пользователи. Каково решение этой проблемы?
это код, который я пробовал.

1 / обернутый дочерний элемент с сеткой

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

2 / установить стиль, подобный этому

const useStyles = makeStyles({
  root: {
    display: "flex",
    justifyContent: "flex-start",
    alignContent: "center",
    width: 20000,
    overflowX: "auto"
  }

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"
  }
});