Why does scroll & expand behaves differently in a UserControl

[hplehn]

Question

I would like to create a UserControl with expand and scrolling, but I could not manage yet.
Here is my code derived from an example in the documentation.
If I instantiate the container directly and add it via page.add then it works as desired (1st example).
If I use a UserControl (2nd example), only the list is displayed. It is not scrollable. The title and button are not visible.
(MacOS 14.1.1, Python 3.9.18)
What am I doing wrong?

Code sample

# 1st example
# flet test with scrolling & expand
import flet as ft

def main(page: ft.Page):
    cl = ft.Column(
        spacing=10,
        height=200,
        width=400,
        scroll=ft.ScrollMode.ALWAYS,
    )
    for i in range(0, 50):
        cl.controls.append(ft.Text(f"Text line {i}", key=str(i)))

    def scroll_to_key(e):
        cl.scroll_to(key="20", duration=1000)

    myContainer = ft.Container(
        ft.Column(
            controls=[
                ft.Text("Title", size=20),
                ft.Container(cl, border=ft.border.all(1), expand = True),
                ft.ElevatedButton("Scroll to key '20'", on_click=scroll_to_key),
            ]
        ),
        expand=True,
    )

    page.add(myContainer)

ft.app(main)

# 2nd example
# flet test with scrolling, expand & UserControl
import flet as ft

class FletApp(ft.UserControl):
    def build(self):
        self.cl = ft.Column(
            spacing=10,
            height=200,
            width=400,
            scroll=ft.ScrollMode.ALWAYS,
        )

        for i in range(0, 50):
            self.cl.controls.append(ft.Text(f"Text line {i}", key=str(i)))

        return ft.Container(
            ft.Column(
                controls=[
                    ft.Text("Title", size=20),
                    ft.Container(self.cl, border=ft.border.all(1), expand = True),
                    ft.ElevatedButton("Scroll to key '20'", on_click=self.scroll_to_key),
                ]
            ),
            expand=True,
        )

    def scroll_to_key(self, e):
        self.cl.scroll_to(key="20", duration=1000)

def main(page: ft.Page):
    fletApp = FletApp()
    page.add(fletApp)

ft.app(main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

You need to expand the Usercontrol too. The below example works as expected:

import flet as ft


class FletApp(ft.UserControl):
    def __init__(self, expand=None):
        super().__init__(expand=expand)

    def build(self):
        self.cl = ft.Column(
            spacing=10,
            height=200,
            width=400,
            scroll=ft.ScrollMode.ALWAYS,
        )

        for i in range(0, 50):
            self.cl.controls.append(ft.Text(f"Text line {i}", key=str(i)))

        return ft.Container(
            ft.Column(
                controls=[
                    ft.Text("Title", size=20),
                    ft.Container(self.cl, border=ft.border.all(1), expand=True),
                    ft.ElevatedButton("Scroll to key '20'", on_click=self.scroll_to_key),
                ]
            ),
            expand=True,
        )

    def scroll_to_key(self, e):
        self.cl.scroll_to(key="20", duration=1000)


def main(page: ft.Page):
    fletApp = FletApp(expand=True)
    page.add(fletApp)


ft.app(main)