title: Material UI Flexbox issue
body: <p>I have an issue where for some reason the max-width on a grid element is being set to 16% but I'm not sure why. This is in a react app using sass, jss, and material UI. It also works perfectly fine locally, but the problem gets shown when I build the app and put it into production (which has made it really "fun" to debug. I'm not quite sure what's causing this. </p>
  
  <pre><code>import React from "react";
  
  // @material-ui/core components
  import withStyles from "@material-ui/core/styles/withStyles";
  import Grid from "@material-ui/core/Grid";
  
  const style = {
    grid: {
      margin: "0 -15px",
      width: "calc(100% + 30px)"
      // '&amp;:before,&amp;:after':{
      //   display: 'table',
      //   content: '" "',
      // },
      // '&amp;:after':{
      //   clear: 'both',
      // }
    }
  };
  
  function GridContainer({ ...props }) {
    console.log('GridContainer', props)
    const { classes, children, className, ...rest } = props;
  
    let formattedClassName = className ? className : ''
  
    return (
      &lt;Grid container {...rest} className={classes.grid + " " + formattedClassName + " " + 'classes-grid'}&gt;
        {children}
      &lt;/Grid&gt;
    );
  }
  
  export default withStyles(style)(GridContainer);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/4oWyf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4oWyf.png" alt="css in production app"></a></p>
  
  <p>I don't have a min-width: 600 anywhere in the app so I'm not sure where this is coming from.</p>
  
  <p>Anyone have any idea of the issue or even a good way to go about debugging this? (I've been at this for hours)</p>
  
  <p>adding index.html </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
      &lt;!--
        manifest.json provides metadata used when your web app is added to the
        homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
      --&gt;
      &lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json"&gt;
      &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
      &lt;link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon.png"&gt;
      &lt;link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"&gt;
      &lt;script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"&gt;&lt;/script&gt;
      &lt;!--
        Notice the use of %PUBLIC_URL% in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
  
        Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      --&gt;
      &lt;title&gt;Manager&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;
        You need to enable JavaScript to run this app.
      &lt;/noscript&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
  
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the &lt;body&gt; tag.
  
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      --&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>