How to Keep Tab.Content below Nav in. React Bootstrap


This Content is from Stack Overflow. Question asked by user15155716

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:

onSelect={(e) => {
<Row sm={1} className={'px-3'}>
    <Nav variant="tabs" className="border-bottom-0 flex-row">
            // ...tabsGoHere
<Divider />
        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 */}

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


This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?