title: Material-UI - responsive grid does not resize on mobile width
body: <p>Im struggling to get a page width to resize correctly using material-ui's "xs" fluid grid i.e. a responsive view for mobile.</p>
  
  <p>With a larger page width ("sm" size), my test is rendered with the expected padding however when I reduce the screen size to ~&lt;700 px, the height of the card does not grow and the edge of the text is lost.</p>
  
  <p>Here is an example with the padding on either side of the text:</p>
  
  <p><a href="https://i.stack.imgur.com/WGTDm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WGTDm.png" alt="enter image description here"></a></p>
  
  <p>When I shrink the screen width, the padding is not enforced and the paper height does not grow, hence the text on the right is hidden:</p>
  
  <p><a href="https://i.stack.imgur.com/y82tL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y82tL.png" alt="enter image description here"></a></p>
  
  <p>Here is my example code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import PropTypes from 'prop-types';
  import {withStyles} from '@material-ui/core/styles';
  import Grid from '@material-ui/core/Grid';
  import Paper from '@material-ui/core/Paper';
  
  const styles = (theme) =&gt; ({
    root: {
      flexGrow: 1,
      padding: 20
    }
  });
  
  class Test extends React.Component {
    render() {
      const {classes} = this.props;
  
      return (
        &lt;div className={classes.root}&gt;
          &lt;Grid container spacing={24}&gt;
            &lt;Grid item xs={12} sm={12}&gt;
              &lt;Paper&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur.
              &lt;/Paper&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12} sm={12}&gt;
              &lt;Paper&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur.
              &lt;/Paper&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default withStyles(styles)(Test);
  </code></pre>
  
  <p>Can anyone advise how to get the width to correctly resize with the smaller screen width?</p>