css - Material-UI:如何防止 Grid 元素出现在下一行？

Question

我正在使用 Material-UI Grid ReactJs 中的结构以显示 5 列，如下所示:

在较小的屏幕中，列在下一行中移动。但是在较小的屏幕中，我还希望所有列仅显示在一行中，并且我可以通过水平滚动来访问其他列。

<Grid
  container
  spacing={2}
  style={{
    maxHeight: "100vh",
    overflowY: "auto",
    overflowX: "hidden",
    height: "440px",
    overflow: "auto",
  }}
>
  <Grid item xs={2.1}>
    {cards.map((card) => <Card props={card} /> )}
  </Grid>
</Grid>

Answer 1

因为 Grid uses flexbox在引擎盖下。您可以简单地设置 wrap 值到 nowrap在您的 Grid容器，可以看到Grid的完整API组件 here .

<Grid
  container
  wrap="nowrap" // --> add this line to disable wrap
  style={{ overflow: "auto" }} // --> add scrollbar when overflow
  spacing={8}
>
  {...}
</Grid>

现场演示