React Material Tabs content gets shifted to the out of the expected Container

Issue

I want to implement the Tabs Component for my React Website. I got the Problem, that the content I want to display in the red / blue Container gets shifted to the bottom for the blue container. I know the Problem comes from the red box, which is invisible but somehow is still there and shifts my content to the bottom.

The JSX looks like the following:

        <div className='drinks'>
            <Header />
            <div className="drinks-tabs-wrapper">
                <Tabs value={tab} onChange={ (_, value) => setTab(value) }>
                    <Tab label='Drinks' style={{ color: 'white' }} />
                    <Tab label='Categories' style={{ color: 'white' }} />
                </Tabs>
                <div style={ getTabWrapperStyle('drinks') }>
                    { (!drinks || !drinkCategories) ? 
                    <CircularProgress size={ 100 } /> :
                    <div hidden={ tab !== 0 }>
                        { drinks.map(drink => (
                            <div key={ drink.id }>
                                <p>{ drink.id }</p>
                                <p>{ drink.name }</p>
                                <p>{ drink.price }</p>
                            </div>
                        ))}
                    </div> }
                </div>
                <div style={ getTabWrapperStyle('drinkCategories') }>
                { drinkCategories &&
                    <div hidden={ tab !== 1 }>
                        { drinkCategories.map(drinkCategory => (
                            <div key={ drinkCategory.id }>
                                <p>{ drinkCategory.name }</p>
                            </div>
                        ))}
                    </div> }
                </div>
            </div>
        </div>

The drinks and drinkCategories come from an API (therefore the Loader)

The getTabWrapperStyle which gets the CSS looks like the following:

    const getTabWrapperStyle = (tabName) => {
        if (tabName === 'drinks') {
            if (tab !== 0) {
                return {
                    "display": "flex",
                    "alignItems": "center",
                    "justifyContent": "center",
                    "height": "calc(100% - 50px)",
                    "background": "blue",
                    "overflowY": "scroll"
                }
            } else if (tab !== 1) {
                return {
                    "height": 0
                }
            }
        } else if (tabName === 'drinkCategories') {
            if (tab !== 0) {
                return {
                    "height": 0
                }
            } else if (tab !== 1) {
                return {
                    "display": "flex",
                    "alignItems": "center",
                    "justifyContent": "center",
                    "height": "calc(100% - 50px)",
                    "background": "red",
                    "overflowY": "scroll"
                }
            }
        }
    }

Everything looks fine for the red box, but the blue one doesn't work. The shifting looks like the following:

[1

Solution

Turned out the Problem was the display: flex in the blue / red containers css. Just remove this and work without the flex property and everything works fine.

Answered By - Graf-J