When scrolling the GridView elements are drawn outside the Container where the GridView is located

[Evg0Bond]

Question

Hi. In my application I am using GridView to display photos with captions. The GridView itself is in a Container. In controls GridView I use Container with Column containing photo and caption. When I scroll the GridView, its elements are drawn outside the Container where the GridView is located. How to solve this problem?

Code sample

import flet as ft

def main(page: ft.Page):
 
    def itemsFiles():
        items = []
        for i in range(300):
            image = ft.Image(src=f"D:/images", width=300, fit=ft.ImageFit.FILL,)
            caption = ft.Text(f'Image {i}', color=ft.colors.LIGHT_BLUE_300, data=f'{i}', )
            col = ft.Column(controls=[image,caption], horizontal_alignment = ft.CrossAxisAlignment.CENTER, spacing=0,)
            container = ft.Container(
                content=col, ink=True, 
                on_click=lambda e: print('Click'), 
                alignment = ft.alignment.center, 
                bgcolor=ft.colors.AMBER_900,
                border_radius=10,)
            items.append(container)
        return items
    listImagesGrid = ft.GridView(
            expand=True,
            runs_count=5,
            max_extent=300,
            child_aspect_ratio=1.25,
            spacing=5,
            run_spacing=5,
            controls = itemsFiles(),
            padding=20,
        )

    containerExplorer= ft.Container(
                    content =listImagesGrid,
                    bgcolor=ft.colors.GREEN_100,
                    alignment=ft.alignment.center,
                    padding=20,
                    expand=True,
                    border_radius=10,
                )
    toolButtons=ft.Row(
            [
                ft.IconButton(
                    icon=ft.icons.SELECT_ALL_SHARP,
                    icon_color=ft.colors.INDIGO_200,
                    icon_size=40,
                ),
                ft.IconButton(
                    icon=ft.icons.PHOTO_ALBUM_OUTLINED,
                    icon_color=ft.colors.INDIGO_200,
                    icon_size=40,
                ),
                ft.IconButton(
                    icon=ft.icons.TEXT_SNIPPET_OUTLINED ,
                    icon_color=ft.colors.INDIGO_200,
                    icon_size=40,
                ),
                ft.IconButton(
                    icon=ft.icons.SETTINGS ,
                    icon_color=ft.colors.INDIGO_200,
                    icon_size=40,
                ),
            ]
        )
    containerToolButtons = ft.Container(
                    content=toolButtons,
                    padding=5,
                )
    page.add( containerToolButtons, containerExplorer)
    page.window_maximized = True
    page.theme_mode = ft.ThemeMode.DARK
    page.update()

ft.app(target=main)

Error message

No response

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

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

[ingdesarr1]

Try put the propertie scroll in the column. You can see the diferent options in the documentation.

https://flet.dev/docs/controls/column#scroll