Overflow does not work, instead parent nodes are resized

[gehud]

Bevy version

0.16.0

Relevant system information

`AdapterInfo { name: "NVIDIA GeForce RTX 3050 Laptop GPU", vendor: 4318, device: 9634, device_type: DiscreteGpu, driver: "NVIDIA", driver_info: "566.36", backend: Vulkan }`

What you did

I wanted to make a scrollable view:

parent.spawn(Node {
    width: Val::Percent(100.0),
    height: Val::Percent(100.0),
    max_height: Val::Percent(100.0),
    flex_direction: FlexDirection::Column,
    overflow: Overflow::scroll_y(),
    ..default()
})

What went wrong

If there are few elements, then everything is fine. But when they overflow the node, then the parent nodes expand, although I specified the maximum height of 100%

Everything is fine:

Now pay attention to the bottom:

Additional information

Place in the repository:
https://github.com/gehud/bevy_launcher/blob/60f19e2d7bfd4ce347fc00e4f3acd516a6c8fa33/src/projects.rs#L411

[gehud]

My problem was solved by setting the scroll height in pixels manually instead of setting node height = Val::Percent(100.0).

But something needs to be done about the bug.

For example, we have a layout:

commands
        .spawn(Node {
            flex_direction: FlexDirection::Column,
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            padding: UiRect::all(Val::Px(16.0)),
            row_gap: Val::Px(16.0),
            ..default()
        })
        .insert(BackgroundColor(Color::srgb(0.0, 0.0, 0.0)))
        .with_children(|parent| {
            parent
                .spawn(Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(25.0),
                    ..default()
                })
                .insert(BackgroundColor(Color::srgb(1.0, 0.0, 0.0)));

            parent
                .spawn(Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(100.0),
                    padding: UiRect::all(Val::Px(16.0)),
                    ..default()
                })
                .insert(BackgroundColor(Color::srgb(1.0, 1.0, 1.0)));
        });

Then we add the scroll view (Everything is ok):

commands
        .spawn(Node {
            flex_direction: FlexDirection::Column,
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            padding: UiRect::all(Val::Px(16.0)),
            row_gap: Val::Px(16.0),
            ..default()
        })
        .insert(BackgroundColor(Color::srgb(0.0, 0.0, 0.0)))
        .with_children(|parent| {
            parent
                .spawn(Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(25.0),
                    ..default()
                })
                .insert(BackgroundColor(Color::srgb(1.0, 0.0, 0.0)));

            parent
                .spawn(Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(100.0),
                    padding: UiRect::all(Val::Px(16.0)),
                    ..default()
                })
                .insert(BackgroundColor(Color::srgb(1.0, 1.0, 1.0)))
                .with_children(|parent| {
                    parent
                        .spawn(Node {
                            flex_direction: FlexDirection::Column,
                            width: Val::Percent(100.0),
                            height: Val::Percent(100.0),
                            row_gap: Val::Px(16.0),
                            overflow: Overflow::scroll_y(),
                            ..default()
                        })
                        .insert(BackgroundColor(Color::srgb(0.0, 1.0, 0.0)));
                });
        });

Then we add elements (and the layout breaks):

commands
        .spawn(Node {
            flex_direction: FlexDirection::Column,
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            padding: UiRect::all(Val::Px(16.0)),
            row_gap: Val::Px(16.0),
            ..default()
        })
        .insert(BackgroundColor(Color::srgb(0.0, 0.0, 0.0)))
        .with_children(|parent| {
            parent
                .spawn(Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(25.0),
                    ..default()
                })
                .insert(BackgroundColor(Color::srgb(1.0, 0.0, 0.0)));

            parent
                .spawn(Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(100.0),
                    padding: UiRect::all(Val::Px(16.0)),
                    ..default()
                })
                .insert(BackgroundColor(Color::srgb(1.0, 1.0, 1.0)))
                .with_children(|parent| {
                    parent
                        .spawn(Node {
                            flex_direction: FlexDirection::Column,
                            width: Val::Percent(100.0),
                            height: Val::Percent(100.0),
                            row_gap: Val::Px(16.0),
                            overflow: Overflow::scroll_y(),
                            ..default()
                        })
                        .insert(BackgroundColor(Color::srgb(0.0, 1.0, 0.0)))
                        .with_children(|parent| {
                            for _ in 0..50 {
                                parent
                                    .spawn(Node {
                                        width: Val::Percent(100.0),
                                        min_height: Val::Px(16.0),
                                        ..default()
                                    })
                                    .insert(BackgroundColor(Color::srgb(0.0, 0.0, 1.0)));
                            }
                        });
                });
        });

[alice-i-cecile]

This is likely a taffy bug; can you reproduce this upstream, ideally with a differing result in taffy vs a web browser? cc @nicoburns

[Atlas16A]

Its not just scroll but Overflow in general is broken. Not even the basic clip works.