I have a couple of React Bootstrap Tabs within a TabContainer as shown below. My issue now is that when I set the maxHeight of the Tab.Content and it gets exceeded, the content is going under the Nav which is weird.

Here is my code:

<Tab.Container
activeKey={activeTab}
onSelect={(e) => {
    setActiveTab(e);
}}
>
<Row sm={1} className={'px-3'}>
    <Nav variant="tabs" className="border-bottom-0 flex-row">
        {
            // ...tabsGoHere
        }
    </Nav>
</Row>
<Divider />
<Tab.Content
    className='p-4'
    style={{
        maxHeight: 600, //This is causing the Tab content to display under the Tabs instead of below it, once the height exceeds 600.
        overflowY: 'scroll',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    }}>
    <Tab.Pane eventKey={activeTab}>
        {/* ...Content */}
    </Tab.Pane>
</Tab.Content>
</Tab.Container>

How can I ensure the Tab.Content is always displaying below the Tabs and not under them no matter the height of the Tab.Content

Thank you