如何让Tremor的Tab组件适配指定高度的父容器？

核心思路 #

默认Tremor Tab组件的内容区域不会自动适配父容器高度，需要通过CSS限制Tab内容区的高度，让它填充父容器剩余空间，溢出时显示滚动条。

具体实现步骤 #

1. 确保父容器的高度和溢出设置
   给你的400px高度父容器加上overflow: hidden，保证内部元素不会超出容器边界：

   .parent-container {
     height: 400px;
     border: 1px solid #ccc; /* 你截图里的高亮边框 */
     overflow: hidden;
   }
   

2. 让Tab组件占满父容器
   给Tremor的<Tab>根组件添加height: 100%，确保它完全填充父容器：

   import { Tab, TabList, TabPanel, TabPanels } from "@tremor/react";
   
   // 你的组件代码
   <div className="parent-container">
     <Tab className="h-full"> {/* 这里设置高度100% */}
       <TabList>
         <Tab>标签页1</Tab>
         <Tab>标签页2</Tab>
       </TabList>
       <TabPanels className="tab-content-wrapper">
         <TabPanel>
           {/* 你的内容 */}
         </TabPanel>
         <TabPanel>
           {/* 你的内容 */}
         </TabPanel>
       </TabPanels>
     </Tab>
   </div>
   

3. 限制Tab内容区高度
   给<TabPanels>设置高度为父容器剩余空间，同时开启垂直滚动：

   .tab-content-wrapper {
     height: calc(100% - 48px); /* 48px是TabList的默认高度，可根据实际调整 */
     overflow-y: auto;
   }
   

   如果用Tailwind CSS（Tremor基于Tailwind），可以直接用内联类名简化：

   <TabPanels className="h-[calc(100%-48px)] overflow-y-auto">
   

注意事项 #

• 若TabList的实际高度不是48px，可通过浏览器开发者工具查看具体数值，再调整calc里的差值。
• 如果内容区有额外的内边距，记得把内边距数值也加入calc的扣除项里。

内容的提问来源于stack exchange，提问作者daydayup