Python Flet have parent expand but child should not

Question

I am using Flet as the GUI library for my project. I have the following code:

MAIN_GUI = ft.Container(
    margin=ft.margin.only(bottom=40),
    expand=True,
    content=ft.Row([
        ft.Card(
            elevation=30,
            expand=4,
            content=ft.Container(
                content=ft.Column([
                    ft.Text("LEFT SIDE, 1st row", size=30, weight=ft.FontWeight.BOLD),
                    ft.Text("LEFT SIDE 2nd row", size=30, weight=ft.FontWeight.NORMAL)
                ]),
                border_radius=ft.border_radius.all(20),
                bgcolor=ft.colors.WHITE24,
                padding=45,
            )
        ),
        ft.Tabs(
            selected_index=0,
            animation_duration=300,
            expand=3,
            tabs=[
                ft.Tab(
                    text="Tab 1",
                    icon=ft.icons.SEARCH,
                    content=ft.Container(
                        content=ft.Card(
                            elevation=30,
                            content=ft.Container(
                                content=ft.Text("Amazing TAB 1 content", size=50, weight=ft.FontWeight.BOLD),
                                border_radius=ft.border_radius.all(20),
                                bgcolor=ft.colors.WHITE24,
                                padding=45,
                            )
                        )
                    ),
                ),
                ft.Tab(
                    text="Tab 2",
                    icon=ft.icons.SETTINGS,
                    content=ft.Text("Amazing TAB 2 content"),
                ),
            ],
        )
    ])
)

def main(page: ft.Page):
    page.padding = 50
    page.add(MAIN_GUI)
    page.update()


if __name__ == '__main__':
    ft.app(target=main)

This will create a window, which is separated into a left and a right section, where the left section has an ft.Card and the right section has 2 tabs, in which one of them also has an ft.Card.

These Flet's widget has to have expand=True in order for the ft.Tabs to work, however, I would like to have the child widgets, specifically the ft.Card widgets to not expand and instead, their width and height should transform based on the content inside.

Answer 1

Instead of a Container use a Column:

...
ft.Tab(
    text="Tab 1",
    icon=ft.icons.SEARCH,
    content=ft.Column(
        controls=[
            ft.Card(
                elevation=30,
                content=ft.Container(
                    content=ft.Text("Amazing TAB 1 content", size=50, weight=ft.FontWeight.BOLD),
                    border_radius=ft.border_radius.all(20),
                    bgcolor=ft.colors.WHITE24,
                    padding=45,
                )
            )
        ]
    ),
)
...

After inserting a Column as base control of your Tab, you can now add any other control in its' controls prop and you will notice the issue is resolved.