Material-UI: How to column wrap a list


I’m currently using Material-UI to render a list of checkboxes, as done in this example.

The issue is that my list has about ~30 items in it, and I’m putting them all into a dialog. I want my checkbox list items to fill down to a max height (i.e. 500px), and then the rest of the list items should wrap into a new column(s), filling the horizontal space of the dialog.

I’m looking for something like this: (other stackoverflow post that’s asking for something similar)

Here is my code, copied directly from the MUI Reference Docs:

<List className={classes.root}>
  { string) => {                     // (CHECKS = array of strings)
    const labelId = `checkbox-list-label-${value}`;

    return (
            checked={checked.indexOf(value) !== -1}
            inputProps={{ "aria-labelledby": labelId }}
        <ListItemText id={labelId} primary={value} />

But my "root" and "listItem" classes and aren’t changing anything. Here is my (useless) CSS:

checklist: {
  display: "flex",
  flexWrap: "wrap",
  flexDirection: "column",
  height: "500px",
item: {
  flexBasis: "50%",     // Something I saw online

Do I need to override some of the standard MUI styles or something?

(I really don’t want to split my CHECKS list into 3 separate lists and flexboxes, and wrap all that in a big flexbox, etc etc)


You can use column wrap, and make sure to set overflow to auto to show the horizontal scrollbar:

const useStyles = makeStyles({
  container: {
    display: "flex",
    flexFlow: "column wrap",
    gap: "0 30px",
    backgroundColor: "pink",
    height: 300, // set the height limit to your liking
    overflow: "auto"
  item: {
    width: "auto"
<div className={classes.container}>
  { string) => {
    return (
      <ListItem key={value} className={classes.item}>
          <Checkbox edge="start" disableRipple />
        <ListItemText primary={value} />

Live Demo

Codesandbox Demo

Answered By – NearHuscarl

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published