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.

[gehud]

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

Yes, indeed.

[gehud]

It turned out that the result in the browser was exactly the same:

<!DOCTYPE html>

<html>

<head>
    <title>Layout</title>
    <style>
        body,
        html {
            /* Make fullscreen */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .node {
            /* Default by bevy */
            box-sizing: border-box;
            display: flex;
        }
    </style>
</head>

<body>
    <div class="node"
        style=" flex-direction: column; width: 100%; height: 100%; padding: 16px; row-gap: 16px; background-color: rgb(0, 0, 0)">
        <div class="node" style="width: 100%; height: 25%; background-color: rgb(255, 0, 0);">
        </div>
        <div class="node" style="width: 100%; height: 100%; padding: 16px; background-color: rgb(255, 255, 255);">
            <div id="list" class="node"
                style="flex-direction: column; width: 100%; height: 100%; row-gap: 16px; overflow-y: scroll; background-color: rgb(0, 255, 0);">
            </div>
        </div>
    </div>
</body>

<script>
    var content = '';
    
    for (var i = 0; i < 50; i++) {
        content += '<div class="node" style="width: 100%; min-height: 16px; background-color: rgb(0, 0, 255)"></div>'
    }

    document.getElementById('list').innerHTML = content;
</script>

</html>

I can't figure out where something is going wrong...

[nicoburns]

The aim is to the get the <div class="node" style="width: 100%; height: 25%; background-color: rgb(255, 0, 0);"></div> to actually take up space?

The problem is that your two <div class="node"> elements have heights that add up to 125% (which obviously won't fit). So flexbox shrinking is shrinking them to fit. You can try either:

• Setting the height of the second div to 75% instead of 100% (although you may also need to account for spacing in between the nodes)
• Setting flex-shrink to 0 to disable shrinking.

[gehud]

The aim is to the get the <div class="node" style="width: 100%; height: 25%; background-color: rgb(255, 0, 0);"></div> to actually take up space?

The problem is that your two <div class="node"> elements have heights that add up to 125% (which obviously won't fit). So flexbox shrinking is shrinking them to fit. You can try either:

* Setting the height of the second div to 75% instead of 100% (although you may also need to account for spacing in between the nodes)

* Setting flex-shrink to 0 to disable shrinking.

Thanks for the solution, it really works! But it turns out I didn't describe the situation quite right, sorry. Can you suggest something for a solution where the height of the top block is set to constant and the bottom one should fill the remaining space. If I do this, the top block will disappear again, as in the case above.

<!DOCTYPE html>

<html>

<head>
    <title>Layout</title>
    <style>
        body,
        html {
            /* Make fullscreen */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .node {
            /* Default by bevy */
            box-sizing: border-box;
            display: flex;
        }
    </style>
</head>

<body>
    <div class="node"
        style=" flex-direction: column; width: 100%; height: 100%; padding: 16px; row-gap: 16px; background-color: rgb(0, 0, 0)">
        <div class="node" style="width: 100%; height: 50px; background-color: rgb(255, 0, 0);">
        </div>
        <div class="node" style="width: 100%; height: 100%; padding: 16px; background-color: rgb(255, 255, 255);">
            <div id="list" class="node"
                style="flex-direction: column; width: 100%; height: 100%; row-gap: 16px; overflow-y: scroll; background-color: rgb(0, 255, 0);">
            </div>
        </div>
    </div>
</body>

<script>
    var content = '';
    
    for (var i = 0; i < 50; i++) {
        content += '<div class="node" style="width: 100%; min-height: 16px; background-color: rgb(0, 0, 255)"></div>'
    }

    document.getElementById('list').innerHTML = content;
</script>

</html>

(Now the top block has a height of 50 pixels instead of 25%)

[gehud]

Finally I found a really weird solution. For the bottom block you need to set min_height: 0, then the bottom block will not go beyond the screen. Works for both html and bevy.