In Chakra UI version 2, I have the following Tabs
component whose content overflows instead of being scrollable:
function App() {
return (
<ChakraProvider>
<Box
width={300}
height={300}
borderWidth={2}
borderRadius="lg"
margin={4}
padding={2}
>
<Flex direction="column">
<Box flex="1">
<Tabs height="full" display="flex" flexDirection="column">
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
</TabList>
<TabPanels overflowY="scroll">
<TabPanel>
<Text>Content for Tab 1</Text>
</TabPanel>
<TabPanel>
<LoremIpsum />
</TabPanel>
</TabPanels>
</Tabs>
</Box>
</Flex>
</Box>
</ChakraProvider>
);
}
The result looks like this:
The code will actually work if the Flex
and the inner Box
component surrounding the Tabs
component are removed:
function App() {
return (
<ChakraProvider>
<Box
width={300}
height={300}
borderWidth={2}
borderRadius="lg"
margin={4}
padding={2}
>
<Tabs height="full" display="flex" flexDirection="column">
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
</TabList>
<TabPanels overflowY="scroll">
<TabPanel>
<Text>Content for Tab 1</Text>
</TabPanel>
<TabPanel>
<LoremIpsum />
</TabPanel>
</TabPanels>
</Tabs>
</Box>
</ChakraProvider>
);
}
However, these two components originate from other parts of the code, and I only added them to create a minimal working example and narrow down the problem. They unfortunately cannot be removed.
What is causing these issues and how do I fix them?
Click here for a working copy (give it some 30 seconds to load).
(Thanks to any answer in advance, this has been bugging me for quite some time now.)