как сделать Tab-компонент шире в material-ui?

пытаюсь настроить красивое отображение табов из библиотеки material-ui Fixed Tabs -> Full width Но в моем варианте отображения табы занимают не все предоставленное пространство:

Код файла представлен ниже:

import React from "react";
import {withStyles} from "material-ui/styles";
import Button from "material-ui/Button";
import {MenuItem} from "material-ui/Menu";
import Chip from "material-ui/Chip";
import CancelIcon from "@material-ui/icons/Cancel";
import Input from "material-ui/Input";
import Select from "react-select";
import Typography from "material-ui/Typography";
import styles from "../../overtimesStyles";
class Option extends React.Component {
  handleClick = (event) => {
    this.props.onSelect(this.props.option, event);
  };
  render() {
    const {isFocused, isSelected, onFocus, children} = this.props;
    return (
      <MenuItem
        onFocus={onFocus}
        selected={isFocused}
        onClick={this.handleClick}
        component="div"
        style={{
          fontWeight: isSelected ? 500 : 400,
        }}
      >
        {children}
      </MenuItem>
    );
  }
}
const SelectWrapped = (props) => {
  const {classes, ...other} = props;
  return (
    <Select
      optionComponent={Option}
      noResultsText={<Typography>No results found</Typography>}
      valueComponent={(valueProps) => {
        const {value, children, onRemove} = valueProps;
        const onDelete = (event) => {
          event.preventDefault();
          event.stopPropagation();
          onRemove(value);
        };
        if (onRemove) {
          return (
            <Chip
              tabIndex={-1}
              label={children}
              className={classes.chip}
              deleteIcon={<CancelIcon onTouchEnd={onDelete}/>}
              onDelete={onDelete}
            />
          );
        }
        return <div className="Select-value">{children}</div>;
      }}
      {...other}
    />
  );
};
/* eslint-disable react/prop-types */
const DivisionReport = ({
  preview = false, saveSelectedDivisions = () => {}, divisions = [1, 2, 4], handleChange, classes, multi,
}) => (
  <div className={classes.apartTabRoot}>
    {preview}
    <Typography variant="display2">Подразделения</Typography>
    <Input
      fullWidth
      inputComponent={SelectWrapped}
      value={multi}
      onChange={handleChange("multi")}
      placeholder="Select multiple countries"
      name="react-select-chip"
      inputProps={{
        classes,
        multi: true,
        instanceId: "react-select-chip",
        id: "react-select-chip",
        simpleValue: true,
        options: divisions.map(item => ({value: item.name, label: item.name})),
      }}
    />
    <Button variant="raised" color="primary" onClick={saveSelectedDivisions} className={classes.button}>Скачать</Button>
  </div>
);
export default withStyles(styles)(DivisionReport);

и стили:

      tab1: {
    width: 600,
    marginLeft: 100,
  },
  tab2: {
    width: 600,
    marginLeft: 100,
  },
  tabsRoot: {
    width: 800,
    height: 500,
    flexShrink: 1,
    flexGrow: 1,
    maxWidth: "auto",
  },
    workarea: {
        margin: "0px 5%",
      },