Expanding row has different effect on Overflow after first expand

[StefJoynson]

Hi,

I am trying to nest a table inside an expanding row component of another table. This mostly works great but i am having some trouble getting the overflow scroll to work consistently. It seems to add the width of the scroll bar onto the inside element after the first time it is opened and closed. I was wondering if this would be a big deal to fix or not?

After First Expand:

When Closed and Expanded Again:

Reproduction Code:

export default class App extends React.Component<Props, State> {
    private data = [
        {id: 1, name: 'name 1'}, 
        {id: 1, name: 'name 2'},
        {id: 3, name: 'name 3'}, 
        {id: 4, name: 'name 4'}
    ];

    render() {
        let expandOpts: ExpandColumnOptions = {
            expandColumnVisible: true,
        };

        return (
            <div style={{maxHeight: '20px', width: '300px', margin: '100px'}}>
                <BootstrapTable 
                    data={this.data}
                    maxHeight="250px"
                    expandableRow={() => true}
                    expandComponent={this.expandedRowRenderer}
                    expandColumnOptions={expandOpts} 
                >
                    <TableHeaderColumn 
                        dataField="id" 
                        isKey={true} 
                        width="100px"
                    >
                        Id
                    </TableHeaderColumn>
                    <TableHeaderColumn 
                        dataField="name" 
                        width="100px"
                    >
                        Name
                    </TableHeaderColumn>
                </BootstrapTable>
            </div>
        );
    }

    private expandedRowRenderer = (row: any) => {

        return (
            <BootstrapTable 
                data={this.data}
            >
                <TableHeaderColumn 
                    dataField="id" 
                    isKey={true} 
                    width="60px"
                >
                    Id
                </TableHeaderColumn>
                <TableHeaderColumn 
                    dataField="name" 
                    width="60px"
                >
                    Name
                </TableHeaderColumn>
            </BootstrapTable>
        );
    }
}

[StefJoynson]

Doesn't actually have to be a nested table, replacing the content of expendedRowRenderer with this does the same...

            <div>
                <div>test</div>
                <div>test</div>
                <div>test</div>
                <div>test</div>
            </div>