css - 将水平无序列表的项目拆分到下一行

Question

我正在使用 material-ui List 有条件地呈现水平列表。我希望列表项根据父容器的宽度换行到下一行。我尝试了溢出：自动，但即使父级有足够的高度，它也会给我滚动条。请在下面找到我的代码。

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    width: "100%",
    maxWidth: 360,
    minHeight: "100%",
  },
  flexRow: {
    display: "flex",
    flexDirection: "column",
  },
}));

    <List
      className={
        listDirection === "row"
          ? classes.root
          : classes.root + " " + classes.flexRow
      }
      style={{width:"300px"}}
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          {listLabel}
        </ListSubheader>
      }
    >
      {listItems.map((li) => {
        const labelId = `li-label-${li.id}-${li.name}`;

        return (
          <ListItem
            key={li.id}
            role={undefined}
            dense
            button
            onClick={handleToggle(li)}
            style={{height:"30px"}}
          >
            <ListItemIcon>
              <Checkbox
                edge="start"
                checked={checked.findIndex((i) => i.name === li.name) !== -1}
                tabIndex={-1}
                disableRipple
                inputProps={{ "aria-labelledby": labelId }}
              />
            </ListItemIcon>
            <ListItemText
              id={labelId}
              primary={liNameFormatter ? liNameFormatter(li) : li.name}
            />
          </ListItem>
        );
      })}
    </List>

这是我所期待的。

标签： csslistmaterial-uioverflow