title: Material-UI: How to column wrap a list
body: <p>I'm currently using Material-UI to render a list of checkboxes, as done in <a href="https://v4.mui.com/components/lists/#checkbox" rel="nofollow noreferrer">this example</a>.</p>
  <p>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 <strong>the rest of the list items should wrap into a new column(s), filling the horizontal space of the dialog</strong>.</p>
  <p>I'm looking for something like this: <a href="https://stackoverflow.com/questions/41348062/flex-items-not-wrapping-in-a-column-direction-container">(other stackoverflow post that's asking for something similar)</a></p>
  <p>Here is my code, copied directly from the MUI Reference Docs:</p>
  <pre><code>&lt;List className={classes.root}&gt;
    {CHECKS.map((value: string) =&gt; {                     // (CHECKS = array of strings)
      const labelId = `checkbox-list-label-${value}`;
  
      return (
        &lt;ListItem
          key={value}
          role={undefined}
          dense
          button
          onClick={handleToggle(value)}
          className={classes.listItem}
        &gt;
          &lt;ListItemIcon&gt;
            &lt;Checkbox
              edge=&quot;start&quot;
              checked={checked.indexOf(value) !== -1}
              tabIndex={-1}
              disableRipple
              inputProps={{ &quot;aria-labelledby&quot;: labelId }}
            /&gt;
          &lt;/ListItemIcon&gt;
          &lt;ListItemText id={labelId} primary={value} /&gt;
        &lt;/ListItem&gt;
      );
    })}
  &lt;/List&gt;
  </code></pre>
  <p>But my &quot;root&quot; and &quot;listItem&quot; classes and aren't changing anything. Here is my (useless) CSS:</p>
  <pre><code>checklist: {
    display: &quot;flex&quot;,
    flexWrap: &quot;wrap&quot;,
    flexDirection: &quot;column&quot;,
    height: &quot;500px&quot;,
  },
  item: {
    flexBasis: &quot;50%&quot;,     // Something I saw online
  },
  </code></pre>
  <p>Do I need to override some of the standard MUI styles or something?</p>
  <p>(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)</p>