flexbox to make ul wrap

Question

Currently, my code looks like this.

HTML


  return (
    <Card {...props} className={` ${classes.root} ${rootClassName}`} onClick={onClick}>
      {children}
        <div className={classes.box}>
          <ul>
          {props.pizzas?.toppings?.map((topping) => (
            <li key={topping.id} className={classes.list}>{topping.name}</li>
          ))}
          </ul>
        </div>
    </Card>
  );

CSS

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    textAlign: 'center',
    padding: theme.spacing(2, 2, 2),
    height: theme.typography.pxToRem(500),
    '&:hover': {
      cursor: 'pointer',
    },
  },
  box: {
    height: '300px',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  list: {
    flex: '0 0 70px',
  }
}));

My list looks like the below picture. I want the list to wrap if there is space without overlapping each other, and if there is space at the bottom which there is right now to stack together if there are more toppings.

Thanks!

Does this answer your question? [How to make a
display in a horizontal row](https://stackoverflow.com/questions/885691/how-to-make-a-ul-display-in-a-horizontal-row) — Ronnie Royston, Oct 25 '22 at 04:25
@RonnieRoyston doing it from the link you provided did some thing similar to what I want but i caused the bullets to disappear. As well my list ends up leaving the container, and I don't know why. — Acer79, Oct 25 '22 at 16:03

score 0 · Answer 1 · answered Oct 28 '22 at 14:25

For anyone that runs into a similar problem this is how I solved it.

 column1: {
    columns: '1',
    width: '300px',
  },
  column2: {
    columns: '2',
    width: '500px',
  },
  column4: {
    columns: '5',
    width: '800px',
  },

I used columns

flexbox to make ul wrap

1 Answers1