Grid joined columns misplaced when a flexgrow + zero width column exists

[mikhail-barg]

Description

I'm prepending a "spacing" column to a grid with joined columns, and it breaks the joined header row.

Looks like this:

Expected outcome

If I remove the .setWidth("0") line on the "Z" column, it looks as expected:

Minimal reproducible example

@Route("")
public class MainView extends VerticalLayout {

    public final class Dto {
        public String get() { return "value"; }
    }

    public MainView() {

        Grid<Dto> grid = new Grid<>();
        grid.prependHeaderRow(); //initial header
        HeaderRow groupHeaderRow = grid.prependHeaderRow();

        Grid.Column<Dto> z = grid.addColumn(Dto::get)
            .setHeader("Col Z")
            .setWidth("0")      //this line!
            .setFlexGrow(1);
        Grid.Column<Dto> a = grid.addColumn(Dto::get).setHeader("Col A");
        Grid.Column<Dto> b = grid.addColumn(Dto::get).setHeader("Col B");
        groupHeaderRow.join(a, b).setText("Join");

        grid.setSizeFull();
        grid.addThemeVariants(GridVariant.LUMO_COLUMN_BORDERS);
        this.setSizeFull();
        this.add(grid);
    }
}

Steps to reproduce

just run it

Environment

Vaadin version(s): checked on 24.5.5, 24.4.6
OS: Windows 11
Browser: Chrome 131.0.6778.70

Browsers

Chrome, Edge, Issue is not browser related