css - React-flikar som renderar flikinnehåll vertikalt under varandra över flikar

Jag försöker rendera flikar med react-tabs. Flikinnehållet renderas ett efter ett (över olika flikar) på följande sätt

Lägger till mitt kodavsnitt

<Tabs className="tabs">
    <TabList className="tab-header-list">
        <Tab selectedClassName="tab-header-list-items"><b>A</b></Tab>
        <Tab selectedClassName="tab-header-list-items"><b>B</b></Tab>
        <Tab selectedClassName="tab-header-list-items"><b>C</b></Tab>
        <Tab selectedClassName="tab-header-list-items"><b>D</b></Tab>
    </TabList>
    <TabPanel key="1" className="tab-panel">
        <BarChart chartData={userData} />
    </TabPanel>
    <TabPanel key="3" className="tab-panel">
         <BarChart chartData={userData} />
    </TabPanel>
    <TabPanel key="2" className="tab-panel">
         <BarChart chartData={userData} />
    </TabPanel>
</Tabs>

CSS använd

.tabs {
    
}

.tab-header-list{
    color: grey;
}

.tab-header-list-items {
    display: inline-block;
    background-color: black;
    width: 25%;
    color: black;
}

.tab-panel {
    width: 900px;
    height: 300px;
}

Förväntad faktisk rendering

Har testat alla värden för flex-egenskapen, display-egenskapen, men inget verkar fungera. Vänligen ge förslag.

Svar #1

Ta bort höjdinställningen från .tab-panel

Svar #2

Denna regel bryter den

.tab-panel {
    width: 900px;
    height: 300px;
}

Att specificera höjd och bredd på det sättet kan bryta bibliotek. Jag skulle tillämpa dessa regler på innehållet inom .tab-panel, men inte på .tab-panel själv