Chakra UI：需要有关可滚动选项卡内容的帮助

Question

在 Chakra UI 版本 2 中，我有以下

Tabs

组件，其内容溢出而不是可滚动：

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>
  );
}

结果如下所示：

如果删除

Flex

和围绕

Box

组件的内部

Tabs

组件，代码实际上将起作用：

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>
  );
}

但是，这两个组件源自代码的其他部分，我添加它们只是为了创建一个最小的工作示例并缩小问题范围。不幸的是，它们无法删除。

造成这些问题的原因以及如何解决这些问题？

单击此处获取工作副本（需要大约 30 秒的时间来加载）。

（感谢提前的任何答复，这已经困扰我很长一段时间了。）

Answer 1

需要确保所有父组件都指定了它们的高度。具体来说，一旦将

height="full"

属性添加到第二个示例中已删除的

Flex

和

Box

组件中，布局问题就会解决，选项卡内容确实会滚动：

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>
  );
}