Material-UI table overflows its table wrapper

Question

my material-ui table resizes and scrolls horizontally just fine, however, the table element and its children spill over, invisible off the right side of the page. Here is a gif of the behavior. https://i.sstatic.net/lXuHj.jpg

And an image of the inspected elements. https://i.sstatic.net/tNgtl.jpg

What might be causing this behavior?

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3
  },
  table: {},
  tableWrapper: {
    overflowX: 'auto'
  }
});

.

<Paper className={classes.root}>
        <EnhancedTableToolbar
          numSelected={selected.length}
          tableTitle={'Accounts'}
        >
          <AccountFilterList />
        </EnhancedTableToolbar>
        <div className={classes.tableWrapper}>
          <Table className={classes.table} aria-labelledby='tableTitle'>
            <EnhancedTableHead
              numSelected={selected.length}
              order={order}
              orderBy={orderBy}
              onSelectAllClick={this.handleSelectAllClick}
              onRequestSort={this.handleRequestSort}
              rowCount={data.length}
              columnData={columnData}
            />
            <TableBody>
              {data
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(n => {
                  const isSelected = this.isSelected(n.ref);
                  return (
                    <TableRow
                      hover
                      onClick={event => this.handleRowClick(event, n.ref)}
                      role='checkbox'
                      aria-checked={isSelected}
                      tabIndex={-1}
                      key={n.ref}
                      selected={isSelected}
                    >
                      <TableCell padding='checkbox'>
                        <Checkbox
                          checked={isSelected}
                          onChange={event => this.handleClick(event, n.ref)}
                        />
                      </TableCell>
                      <TableCell>
                        <Avatar
                          alt={n.name}
                          src={`//logo.clearbit.com/${n.clearBit}`}
                          onError={e => {
                            e.target.src =
                              'https://doxhze3l6s7v9.cloudfront.net/app/static/img/company-default-img.png';
                          }}
                        />
                      </TableCell>
                      <TableCell>{n.name}</TableCell>
                      <TableCell>{n.owner}</TableCell>
                      <TableCell numeric>{n.dateCreated}</TableCell>
                    </TableRow>
                  );
                })}
              {emptyRows > 0 && (
                <TableRow style={{ height: 49 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
        <TablePagination
          component='div'
          count={data.length}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            'aria-label': 'Previous Page'
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page'
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
        />
      </Paper>

Answer 1

Your Parent wrapper must be having some width specified, thats why its taking that space in the right. Check whether that empty space is caused by the table elements or the parent wrapper element (AppBar).