在调整大小的材质用户界面上无水平滚动

Question

我正在努力使此表正常运行。我已将表的overflow-x设置为auto。该表与此处的material-ui表非常相似：https://material-ui.com/demos/tables/

表格会缩小到某个点，然后只会在页面边缘溢出。

gif of the behavior

Class EnhancedTableHead extends Component {
  createSortHandler = property => event => {
    this.props.onRequestSort(event, property);
  };

  render() {
    const {
      onSelectAllClick,
      order,
      orderBy,
      numSelected,
      rowCount
    } = this.props;

    return (
      <TableHead>
        <TableRow>
          <TableCell padding="checkbox">
            <Checkbox
              indeterminate={numSelected > 0 && numSelected < rowCount}
              checked={numSelected === rowCount}
              onChange={onSelectAllClick}
            />
          </TableCell>
          {columnData.map(column => {
            return (
              <TableCell
                key={column.id}
                numeric={column.numeric}
                padding={column.disablePadding ? 'none' : 'default'}
                sortDirection={orderBy === column.id ? order : false}
              >
                <Tooltip
                  title="Sort"
                  placement={column.numeric ? 'bottom-end' : 'bottom-start'}
                  enterDelay={300}
            >
              <TableSortLabel
                active={orderBy === column.id}
                direction={order}
                onClick={this.createSortHandler(column.id)}
              >
                {column.label}
              </TableSortLabel>
            </Tooltip>
          </TableCell>
        );
      }, this)}
    </TableRow>
  </TableHead>
);
  }
}

EnhancedTableHead.propTypes = {
  numSelected: PropTypes.number.isRequired,
  onRequestSort: PropTypes.func.isRequired,
  onSelectAllClick: PropTypes.func.isRequired,
  order: PropTypes.string.isRequired,
  orderBy: PropTypes.string.isRequired,
  rowCount: PropTypes.number.isRequired
};

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


class Companies extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      order: 'asc',
      orderBy: 'info',
      selected: [],
      data:
        this.props.accounts.length > 0
          ? this.props.accounts.sort((a, b) => (a.name < b.name ? -1 : 1))
          : [],
      page: 0,
      rowsPerPage: 3
    };
  }
render() {
const { classes } = this.props;
const { data, order, orderBy, selected, rowsPerPage, page } = this.state;
const emptyRows =
  rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
return (
  <Paper className={classes.root}>
    <EnhancedTableToolbar numSelected={selected.length} />
    <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}
        />
        <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>
);
  }
}

Companies.propTypes = {
  classes: PropTypes.object.isRequired
};

任何对表为何表现方式的见解将不胜感激。谢谢！