Chakra UI: Help on scrollable tab content needed

Question

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}
      >
        {/*<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>
  );
}

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.)

Answer 1

One needs to make sure that all parent components specify their height. Specifically, as soon as the height="full" prop is added to both the Flex and the Box component that had been removed in the second example, the layout issue resolves and the tab content will indeed scroll:

function App() {
  return (
    <ChakraProvider>
      <Box
        width={300}
        height={300}
        borderWidth={2}
        borderRadius="lg"
        margin={4}
        padding={2}
      >
        <Flex height="full" direction="column">
          <Box height="full" 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>
  );
}