align elements next to each other using all available width in flexbox container

Question

I am using flexbox for the grid and I have a problem placing 7 table next to each other.

This is the way I am using the material-ui component table:

  <div >
            <Table
                height={this.state.height}
                fixedHeader={this.state.fixedHeader}
                selectable={this.state.selectable}
            >
                <TableHeader
                    enableSelectAll={this.state.enableSelectAll}
                    displaySelectAll={this.state.displayCheckbox}
                    adjustForCheckbox={this.state.displayCheckbox}
                >
                    <TableRow>
                        <TableHeaderColumn colSpan="4" style={{textAlign: 'center'}}>
                            {this.state.date.toDateString()}
                        </TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody
                    deselectOnClickaway={this.state.deselectOnClickaway}
                    showRowHover={this.state.showRowHover}
                    displayRowCheckbox={this.state.displayCheckbox}
                >
                    {this.state.schedule.map( (row, index) => (
                        <TableRow key={index} selected={row.selected} style={{cursor: 'pointer'}}>
                            <TableRowColumn>
                                {row.time}
                            <Divider/>
                                {row.name}
                            <Badge
                                badgeStyle={{fontSize: '12px', width:'19px' ,height:'19px'}}
                                style={{padding:'2px 16px 12px 12px'}}
                                badgeContent={row.alreadyIn}
                                secondary={true}
                            >
                            </Badge>
                            </TableRowColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>


        </div>

this is the way I use the flexbox

<div className="col-lg col-md col-sm col-xs" >
                    <EventColumn  key={Math.random()} schedule={daySchedule} date={this.addDaysToDate(this.state.dateToStartFrom,index)}></EventColumn>
                </div>

Instead of spreading the tables the tables looks like this:

How can i spread them all over the row?