title: Material UI Table not being responsive while using example Responsive Drawer
body: <p>I have created a web app with the base coming from the Material-UI Example on a <a href="https://material-ui.com/demos/drawers/#responsive-drawer" rel="noreferrer">responsive drawer</a></p>
  
  <p>I am trying to get a table to resize responsively to the screen width, but, for some reason, the <code>ResponsiveDrawer</code> container provided by Material-UI is breaking the responsiveness of the contents (i.e. the table)</p>
  
  <p><a href="https://codesandbox.io/s/2wq4jp557n" rel="noreferrer">Here is an example</a> that I wrote that is perfectly responsive:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Table from "@material-ui/core/Table/Table";
  import TableHead from "@material-ui/core/TableHead/TableHead";
  import TableRow from "@material-ui/core/TableRow/TableRow";
  import TableCell from "@material-ui/core/TableCell/TableCell";
  import TableBody from "@material-ui/core/TableBody/TableBody";
  import Paper from "@material-ui/core/Paper/Paper";
  import Grid from "@material-ui/core/Grid/Grid";
  
  import "./styles.css";
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Grid container justify={"center"}&gt;
          &lt;Grid item xs={12} md={10} style={{ padding: "8px" }}&gt;
            &lt;Paper style={{ overflowX: "auto" }}&gt;
              &lt;Table style={{ minWidth: "340px" }}&gt;
                &lt;TableHead&gt;
                  &lt;TableRow&gt;
                    &lt;TableCell&gt;Name&lt;/TableCell&gt;
                    &lt;TableCell&gt;Column&lt;/TableCell&gt;
                    &lt;TableCell&gt;Operating System&lt;/TableCell&gt;
                    &lt;TableCell&gt;Status&lt;/TableCell&gt;
                    &lt;TableCell&gt;CPU Cores&lt;/TableCell&gt;
                    &lt;TableCell&gt;Memory (MB)&lt;/TableCell&gt;
                    &lt;TableCell&gt;IP Address&lt;/TableCell&gt;
                  &lt;/TableRow&gt;
                &lt;/TableHead&gt;
                &lt;TableBody&gt;
                  &lt;TableRow&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                  &lt;/TableRow&gt;
                  &lt;TableRow&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;TableCell&gt;Content&lt;/TableCell&gt;
                  &lt;/TableRow&gt;
                &lt;/TableBody&gt;
              &lt;/Table&gt;
            &lt;/Paper&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>And <a href="https://codesandbox.io/s/wwlj1jq565" rel="noreferrer">here is that same example</a> using a modified (changed the content to <code>this.props.children</code> instead of static) version of Material-UI's <code>ResponsiveDrawer</code></p>
  
  <p><strong>ResponsiveDrawer.js</strong></p>
  
  <pre><code>import React from "react";
  import PropTypes from "prop-types";
  import AppBar from "@material-ui/core/AppBar";
  import CssBaseline from "@material-ui/core/CssBaseline";
  import Divider from "@material-ui/core/Divider";
  import Drawer from "@material-ui/core/Drawer";
  import Hidden from "@material-ui/core/Hidden";
  import IconButton from "@material-ui/core/IconButton";
  import InboxIcon from "@material-ui/icons/MoveToInbox";
  import List from "@material-ui/core/List";
  import ListItem from "@material-ui/core/ListItem";
  import ListItemIcon from "@material-ui/core/ListItemIcon";
  import ListItemText from "@material-ui/core/ListItemText";
  import MailIcon from "@material-ui/icons/Mail";
  import MenuIcon from "@material-ui/icons/Menu";
  import Toolbar from "@material-ui/core/Toolbar";
  import Typography from "@material-ui/core/Typography";
  import { withStyles } from "@material-ui/core/styles";
  
  const drawerWidth = 240;
  
  const styles = theme =&gt; ({
    root: {
      display: "flex"
    },
    drawer: {
      [theme.breakpoints.up("sm")]: {
        width: drawerWidth,
        flexShrink: 0
      }
    },
    appBar: {
      marginLeft: drawerWidth,
      [theme.breakpoints.up("sm")]: {
        width: `calc(100% - ${drawerWidth}px)`
      }
    },
    menuButton: {
      marginRight: 20,
      [theme.breakpoints.up("sm")]: {
        display: "none"
      }
    },
    toolbar: theme.mixins.toolbar,
    drawerPaper: {
      width: drawerWidth
    },
    content: {
      flexGrow: 1,
      padding: theme.spacing.unit * 3
    }
  });
  
  class ResponsiveDrawer extends React.Component {
    state = {
      mobileOpen: false
    };
  
    handleDrawerToggle = () =&gt; {
      this.setState(state =&gt; ({ mobileOpen: !state.mobileOpen }));
    };
  
    render() {
      const { classes, theme } = this.props;
  
      const drawer = (
        &lt;div&gt;
          &lt;div className={classes.toolbar} /&gt;
          &lt;Divider /&gt;
          &lt;List&gt;
            {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) =&gt; (
              &lt;ListItem button key={text}&gt;
                &lt;ListItemIcon&gt;
                  {index % 2 === 0 ? &lt;InboxIcon /&gt; : &lt;MailIcon /&gt;}
                &lt;/ListItemIcon&gt;
                &lt;ListItemText primary={text} /&gt;
              &lt;/ListItem&gt;
            ))}
          &lt;/List&gt;
          &lt;Divider /&gt;
          &lt;List&gt;
            {["All mail", "Trash", "Spam"].map((text, index) =&gt; (
              &lt;ListItem button key={text}&gt;
                &lt;ListItemIcon&gt;
                  {index % 2 === 0 ? &lt;InboxIcon /&gt; : &lt;MailIcon /&gt;}
                &lt;/ListItemIcon&gt;
                &lt;ListItemText primary={text} /&gt;
              &lt;/ListItem&gt;
            ))}
          &lt;/List&gt;
        &lt;/div&gt;
      );
  
      return (
        &lt;div className={classes.root}&gt;
          &lt;CssBaseline /&gt;
          &lt;AppBar position="fixed" className={classes.appBar}&gt;
            &lt;Toolbar&gt;
              &lt;IconButton
                color="inherit"
                aria-label="Open drawer"
                onClick={this.handleDrawerToggle}
                className={classes.menuButton}
              &gt;
                &lt;MenuIcon /&gt;
              &lt;/IconButton&gt;
              &lt;Typography variant="h6" color="inherit" noWrap&gt;
                Responsive drawer
              &lt;/Typography&gt;
            &lt;/Toolbar&gt;
          &lt;/AppBar&gt;
          &lt;nav className={classes.drawer}&gt;
            {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
            &lt;Hidden smUp implementation="css"&gt;
              &lt;Drawer
                container={this.props.container}
                variant="temporary"
                anchor={theme.direction === "rtl" ? "right" : "left"}
                open={this.state.mobileOpen}
                onClose={this.handleDrawerToggle}
                classes={{
                  paper: classes.drawerPaper
                }}
              &gt;
                {drawer}
              &lt;/Drawer&gt;
            &lt;/Hidden&gt;
            &lt;Hidden xsDown implementation="css"&gt;
              &lt;Drawer
                classes={{
                  paper: classes.drawerPaper
                }}
                variant="permanent"
                open
              &gt;
                {drawer}
              &lt;/Drawer&gt;
            &lt;/Hidden&gt;
          &lt;/nav&gt;
          &lt;main className={classes.content}&gt;
            &lt;div className={classes.toolbar} /&gt;
            {this.props.children}
          &lt;/main&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ResponsiveDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
    // Injected by the documentation to work in an iframe.
    // You won't need it on your project.
    container: PropTypes.object,
    theme: PropTypes.object.isRequired
  };
  
  export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Table from "@material-ui/core/Table/Table";
  import TableHead from "@material-ui/core/TableHead/TableHead";
  import TableRow from "@material-ui/core/TableRow/TableRow";
  import TableCell from "@material-ui/core/TableCell/TableCell";
  import TableBody from "@material-ui/core/TableBody/TableBody";
  import Paper from "@material-ui/core/Paper/Paper";
  import ResponsiveDrawer from "./ResponsiveDrawer";
  import Grid from "@material-ui/core/Grid/Grid";
  
  import "./styles.css";
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;ResponsiveDrawer&gt;
          &lt;Grid container justify={"center"}&gt;
            &lt;Grid item xs={12} md={10} style={{ padding: "8px" }}&gt;
              &lt;Paper style={{ overflowX: "auto" }}&gt;
                &lt;Table style={{ minWidth: "340px" }}&gt;
                  &lt;TableHead&gt;
                    &lt;TableRow&gt;
                      &lt;TableCell&gt;Name&lt;/TableCell&gt;
                      &lt;TableCell&gt;Column&lt;/TableCell&gt;
                      &lt;TableCell&gt;Operating System&lt;/TableCell&gt;
                      &lt;TableCell&gt;Status&lt;/TableCell&gt;
                      &lt;TableCell&gt;CPU Cores&lt;/TableCell&gt;
                      &lt;TableCell&gt;Memory (MB)&lt;/TableCell&gt;
                      &lt;TableCell&gt;IP Address&lt;/TableCell&gt;
                    &lt;/TableRow&gt;
                  &lt;/TableHead&gt;
                  &lt;TableBody&gt;
                    &lt;TableRow&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;/TableRow&gt;
                    &lt;TableRow&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                      &lt;TableCell&gt;Content&lt;/TableCell&gt;
                    &lt;/TableRow&gt;
                  &lt;/TableBody&gt;
                &lt;/Table&gt;
              &lt;/Paper&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/ResponsiveDrawer&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>I just can't seem to figure out what it is inside the <code>ResponsiveDrawer</code> container that is causing the responsiveness to break. </p>
  
  <p>All help appreciated. </p>
  
  <p>UPDATE (1/7/2019): 
  It looks like removing <code>display: flex</code> from the root solves the issue, but then I have the issue of it not honoring the left drawer.</p>
  
  <p>UPDATE (1/9/2019):
  As suggested by @Gaurav Rana, <a href="https://codesandbox.io/s/6zl7r2lx0r" rel="noreferrer">I have added</a> <code>width: 100%;</code> to the main element and it has half solved the problem. Now, the table will overflow / scroll properly when the sidebar is not visible. But, when the sidebar is still visible but the screen isn't wide enough for the whole table, the table scrolls under the sidebar.</p>