title: How to add horizontal scroll in Material UI grid
body: <p>I am trying to build kanban board with grid layout. there is seven columns in kanban boards. i have used materail Ui grid for each columns.</p>
  
  <p>I have tried with below css but it's not working</p>
  
  <p><code>overflow: auto; 
     width:100%</code></p>
  
  <p>I have also tried with Single column gridlist but it also not working.</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import App from "../components/App";
  import Header from "../components/Header";
  import { withStyles } from '@material-ui/core/styles';
  import Grid from '@material-ui/core/Grid';
  import GridList from '@material-ui/core/GridList';
  import Paper from '@material-ui/core/Paper';
  import Card from '@material-ui/core/Card';
  import CardActions from '@material-ui/core/CardActions';
  import CardContent from '@material-ui/core/CardContent';
  import Button from '@material-ui/core/Button';
  import Typography from '@material-ui/core/Typography';
  
  const styles = theme =&gt; ({
    root: {
       flexGrow: 1,
       marginTop: 30,
       display: 'flex',
       oveflow: "auto",
       maxWidth: "100%"
    },
    card: {
      minWidth: 180,
      marginBottom:20
    },
    bullet: {
      display: 'inline-block',
      margin: '0 2px',
      transform: 'scale(0.8)',
    },
    title: {
      fontSize: 14,
    },
    pos: {
      marginBottom: 12,
    },
    content: {
      flexGrow: 1
    },
    paper: {
      maxWidth: 800,
      margin: `${theme.spacing.unit}px auto`,
      padding: theme.spacing(2)
    },
  });
  
  function SimpleCard(props) {
    const { classes } = props;
    const bull = &lt;span className={classes.bullet}&gt;•&lt;/span&gt;;
  
    return (
      &lt;App&gt;
      &lt;Header /&gt;
      &lt;main className={classes.content}&gt;
         &lt;div className={classes.toolbar} /&gt;
         &lt;div className={classes.paper}&gt;
  
         &lt;Grid container className={classes.root} spacing={16}&gt;
                 &lt;Grid item xs={2}&gt;
                  &lt;Paper className={classes.paper}&gt;
                       &lt;Card className={classes.card}&gt;
                          &lt;CardContent&gt;
                              &lt;Typography className={classes.title} color="textSecondary" gutterBottom&gt;
                              Word of the Day
                              &lt;/Typography&gt;
                              &lt;Typography variant="h5" component="h2"&gt;
                              Task 1
                              &lt;/Typography&gt;
                              &lt;Typography className={classes.pos} color="textSecondary"&gt;
                              adjective
                              &lt;/Typography&gt;
                          &lt;/CardContent&gt;
                          &lt;CardActions&gt;
                              &lt;Button size="small"&gt;Learn More&lt;/Button&gt;
                          &lt;/CardActions&gt;
                      &lt;/Card&gt;
                      &lt;Card className={classes.card}&gt;
                          &lt;CardContent&gt;
                              &lt;Typography className={classes.title} color="textSecondary" gutterBottom&gt;
                              Word of the Day
                              &lt;/Typography&gt;
                              &lt;Typography variant="h5" component="h2"&gt;
                              Task 1
                              &lt;/Typography&gt;
                              &lt;Typography className={classes.pos} color="textSecondary"&gt;
                              adjective
                              &lt;/Typography&gt;
                          &lt;/CardContent&gt;
                          &lt;CardActions&gt;
                              &lt;Button size="small"&gt;Learn More&lt;/Button&gt;
                          &lt;/CardActions&gt;
                      &lt;/Card&gt;
                      &lt;Card className={classes.card}&gt;
                          &lt;CardContent&gt;
                              &lt;Typography className={classes.title} color="textSecondary" gutterBottom&gt;
                              Word of the Day
                              &lt;/Typography&gt;
                              &lt;Typography variant="h5" component="h2"&gt;
                              Task 1
                              &lt;/Typography&gt;
                              &lt;Typography className={classes.pos} color="textSecondary"&gt;
                              adjective
                              &lt;/Typography&gt;
                          &lt;/CardContent&gt;
                          &lt;CardActions&gt;
                              &lt;Button size="small"&gt;Learn More&lt;/Button&gt;
                          &lt;/CardActions&gt;
                      &lt;/Card&gt;
                      &lt;Card className={classes.card}&gt;
                          &lt;CardContent&gt;
                              &lt;Typography className={classes.title} color="textSecondary" gutterBottom&gt;
                              Word of the Day
                              &lt;/Typography&gt;
                              &lt;Typography variant="h5" component="h2"&gt;
                              Task 1
                              &lt;/Typography&gt;
                              &lt;Typography className={classes.pos} color="textSecondary"&gt;
                              adjective
                              &lt;/Typography&gt;
                          &lt;/CardContent&gt;
                          &lt;CardActions&gt;
                              &lt;Button size="small"&gt;Learn More&lt;/Button&gt;
                          &lt;/CardActions&gt;
                      &lt;/Card&gt;
                  &lt;/Paper&gt;
  
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                  &lt;Paper className={classes.paper}&gt;
                  &lt;Card className={classes.card}&gt;
                      &lt;CardContent&gt;
                          &lt;Typography className={classes.title} color="textSecondary" gutterBottom&gt;
                          Word of the Day
                          &lt;/Typography&gt;
                          &lt;Typography variant="h5" component="h2"&gt;
                          Task 1
                          &lt;/Typography&gt;
                          &lt;Typography className={classes.pos} color="textSecondary"&gt;
                          adjective
                          &lt;/Typography&gt;
                      &lt;/CardContent&gt;
                      &lt;CardActions&gt;
                          &lt;Button size="small"&gt;Learn More&lt;/Button&gt;
                      &lt;/CardActions&gt;
                  &lt;/Card&gt;
                  &lt;/Paper&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                  &lt;Paper className={classes.paper}&gt;
                      &lt;Card className={classes.card}&gt;
                          &lt;CardContent&gt;
                              &lt;Typography className={classes.title} color="textSecondary" gutterBottom&gt;
                              Word of the Day
                              &lt;/Typography&gt;
                              &lt;Typography variant="h5" component="h2"&gt;
                              Task 1
                              &lt;/Typography&gt;
                              &lt;Typography className={classes.pos} color="textSecondary"&gt;
                              adjective
                              &lt;/Typography&gt;
                          &lt;/CardContent&gt;
                          &lt;CardActions&gt;
                              &lt;Button size="small"&gt;Learn More&lt;/Button&gt;
                          &lt;/CardActions&gt;
                      &lt;/Card&gt;
                  &lt;/Paper&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                  &lt;Paper className={classes.paper}&gt;
                      &lt;Card className={classes.card}&gt;
                          &lt;CardContent&gt;
                              &lt;Typography className={classes.title} color="textSecondary" gutterBottom&gt;
                              Word of the Day Testing
                              &lt;/Typography&gt;
                              &lt;Typography variant="h5" component="h2"&gt;
                              Task 10000
                              &lt;/Typography&gt;
                              &lt;Typography className={classes.pos} color="textSecondary"&gt;
                              adjective
                              &lt;/Typography&gt;
                          &lt;/CardContent&gt;
                          &lt;CardActions&gt;
                              &lt;Button size="small"&gt;Learn More&lt;/Button&gt;
                          &lt;/CardActions&gt;
                      &lt;/Card&gt;
                  &lt;/Paper&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                  &lt;Paper className={classes.paper}&gt;
                      &lt;Card className={classes.card}&gt;
                          &lt;CardContent&gt;
                              &lt;Typography className={classes.title} color="textSecondary" gutterBottom&gt;
                              Word of the Day Testing
                              &lt;/Typography&gt;
                              &lt;Typography variant="h5" component="h2"&gt;
                              Task 11562
                              &lt;/Typography&gt;
                              &lt;Typography className={classes.pos} color="textSecondary"&gt;
                              adjective
                              &lt;/Typography&gt;
                          &lt;/CardContent&gt;
                          &lt;CardActions&gt;
                              &lt;Button size="small"&gt;Learn More&lt;/Button&gt;
                          &lt;/CardActions&gt;
                      &lt;/Card&gt;
                  &lt;/Paper&gt;
                  &lt;/Grid&gt;
          &lt;/Grid&gt;
         &lt;/div&gt;
      &lt;/main&gt;
      &lt;/App&gt;
    );
  }
  
  SimpleCard.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles, { withTheme: true })(SimpleCard);
  </code></pre>
  
  <p>How to add horizontal scroll in grid column layout?</p>