使用网格分割空间时，请始终先将屏幕分割为列，然后将每列分割为几行。

import { Box, Grid } from "@mui/material";

const fixedItems = [
  "row 1's fixed item",
  "row 2's fixed item",
  "row 3's fixed item",
];
const dynamicItems = [
  ["row 1 dynamic item 1"],
  [
    "row 2 dynamic item 1",
    "row 2 dynamic item 2",
    "row 2 dynamic item 3",
    "row 2 dynamic item 4",
    "row 2 dynamic item 5",
  ],
  ["row 3 dynamic item 1", "dynamic item 2"],
];

const Item = (props) => {
  return (
    <Box
      sx={{
        display: "inline-block",
        backgroundColor: "cyan",
        borderRadius: 2,
        textAlign: "center",
        width: "300px",
        mx: 1,
      }}
    >
      {props.name}
    </Box>
  );
};

function Test() {
  return (
    <Box
      sx={{
        width: "90%",
        direction: "ltr",
        mx: "auto",
      }}
    >
      <Grid container spacing={1} sx={{ border: "1px solid red" }}>
        <Grid
          item
          xs={3}
          container
          spacing={1}
          sx={{
            textAlign: "center",
            border: "1px solid yellow",
          }}
        >
          {fixedItems.map((item, index) => (
            <Grid item xs={12} key={index}>
              <Item name={item} />
            </Grid>
          ))}
        </Grid>
        <Grid
          item
          xs={9}
          container
          spacing={1}
          sx={{
            overflowX: "scroll",
            whiteSpace: "nowrap",
            border: "1px solid green",
          }}
        >
          {dynamicItems.map((item, index) => (
            <Grid item xs={12} key={index}>
              {item.map((innerItem, innerIndex) => (
                <Item name={innerItem} key={innerIndex} />
              ))}
            </Grid>
          ))}
        </Grid>
      </Grid>
    </Box>
  );
}
export default Test;