I am using a library called tremor that draws charts. I am trying its Tab block. I want to make a tab group that can fit into a parent container which has a specified height. However, I think by default the Tab block doesn’t fit into its parent’s container size, and instead it overflows.

Any suggestions of how to make it size flexible?
Thank you!

I highlighted the border of the parent contain in the screenshot to explain what I mean. The parent container is set to 400px height, but the child somehow overflows.

Below is my code.

    import { AreaChart, BadgeDelta, Card, Tab, TabGroup, TabList, TabPanel, TabPanels } from '@tremor/react';
import { sky } from 'tailwindcss/colors';

export default function Page() {

    const chartdata = [
        {
            date: "Jan 23",

            "This Year": 233,
            "Last Year": 289,
        },
        {
            date: "Feb 23",

            "This Year": 233,
            "Last Year": 294,
        },
        {
            date: "Mar 23",

            "This Year": 258,
            "Last Year": 309,
        },
        {
            date: "Apr 23",

            "This Year": 275,
            "Last Year": 314,
        },
        {
            date: "May 23",
            "Last Year": 334,
            // "This Year": 285,
        },
        {
            date: "Jun 23",
            "Last Year": 344,
            // "This Year": 305,
        },
        {
            date: "Jul 23",
            "Last Year": 384,
            // "This Year": 325,
        },
        // ...
        {
            date: "Oct 23",
            "Last Year": 383,
            // "This Year": 347,
        },
    ];


    return (
        <div className="mx-auto max-w-full max-h-[400px] border-8 border-red-600">
            <TabGroup>
                <TabList variant="line" defaultValue="1">
                    <Tab value="1">
                        <div>
                            <Card
                                decoration="top"
                                decorationColor="sky"

                            >

                                <p className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>Title</p>
                                <p className='text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>3000</p>
                                <div className="flex items-center justify-between">
                                    <BadgeDelta
                                        deltaType="moderateIncrease"
                                        isIncreasePositive={false}
                                        size="xs"
                                    >
                                        +9.3%YoY
                                    </BadgeDelta>

                                </div>

                            </Card>
                        </div>

                    </Tab>
                    <Tab value="2">
                        <div>
                            <Card
                                decoration="top"
                                decorationColor="sky"

                            >

                                <p className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>Title</p>
                                <p className='text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>3000</p>
                                <div className="flex items-center justify-between">
                                    <BadgeDelta
                                        deltaType="moderateIncrease"
                                        isIncreasePositive={false}
                                        size="xs"
                                    >
                                        +9.3%YoY
                                    </BadgeDelta>

                                </div>

                            </Card>
                        </div>

                    </Tab>
                    <Tab value="3">
                        <div>
                            <Card
                                decoration="top"
                                decorationColor="sky"

                            >

                                <p className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>Title</p>
                                <p className='text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>3000</p>
                                <div className="flex items-center justify-between">
                                    <BadgeDelta
                                        deltaType="moderateIncrease"
                                        isIncreasePositive={false}
                                        size="xs"
                                    >
                                        +9.3%YoY
                                    </BadgeDelta>

                                </div>

                            </Card>
                        </div>

                    </Tab>
                </TabList>

                <TabPanels>
                    <TabPanel>
                        <Card
                            decoration="left"
                            decorationColor="indigo"
                            className='mt-0 pt-0'
                        >
                            <span className="text-tremor-default text-tremor-content">
                                Title
                            </span>
                            <AreaChart

                                data={chartdata}
                                index="date"
                                categories={["This Year", "Last Year"]}
                                colors={['sky', "gray"]}
                                yAxisWidth={33}
                            />

                        </Card>
                    </TabPanel>
                </TabPanels>
            </TabGroup>
        </div>
    );

}