Chakra UI 2.x：嵌套Flex的Tabs内容无法滚动问题求助

云上老周

2026-6-15

Chakra UI Tabs嵌套Flex时内容溢出无法滚动的问题解决

问题原因

当Tabs被嵌套在Flex(direction="column")和flex="1"的Box中时，Flex容器默认不会对子元素的高度做强制约束。虽然Tabs设置了height="full"，但外层Flex没有明确的高度限制，导致TabPanels无法获取固定的可用高度——内容会直接撑开父元素，自然不会触发滚动。而直接将Tabs放在固定高度的Box里时，Tabs能继承父元素的高度，TabPanels的overflowY="scroll"就能正常生效。

解决方法

给外层Flex和中间的Box添加明确的高度约束，让Tabs能正确继承可用高度：

修改后的代码

function App() {
  return (
    <ChakraProvider>
      <Box
        width={300}
        height={300}
        borderWidth={2}
        borderRadius="lg"
        margin={4}
        padding={2}
      >
        {/* 给Flex添加height="full"，继承父Box的高度 */}
        <Flex direction="column" height="full">
          {/* 给Box添加height="full"，确保Tabs能获取可用高度 */}
          <Box flex="1" height="full">
            <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>
  );
}