Two grids added in a horizontal layout overlap when moving the splitter

I have a confusing layout situation where two grids start to overlap when moving a splitter. I broke it down to the following very simple UI. Basically it contains a horizontal splitter. The splitter’s first component is a horizontal layout. The horizontal layout contains two very simple grids. Each grid contains a label and a text field with undefined width and an additional empty label with width 100% that grabs available space. When moving the splitter to the left the two grids start to overlap (see screenshots 1 through 3.).

This looks pretty ugly. Is there a bug in my code or is this a bug in the layout engine? Or is it expected behaviour (I hope not)?
Kind regards
Jan

@CDIUI("test")
public class TestUi extends UI {

    @Override
    protected void init(VaadinRequest request) {
        HorizontalSplitPanel split = new HorizontalSplitPanel();
        split.setSizeFull();
        split.setSplitPosition(50, Unit.PERCENTAGE);
        split.setFirstComponent(createHorizontalLayoutContainingTwoGrids());
        setContent(split);
    }

    private Component createHorizontalLayoutContainingTwoGrids() {
        HorizontalLayout layout = new HorizontalLayout();
        layout.setSizeFull();

        GridLayout grid1 = createSimpleGrid();
        layout.addComponent(grid1);
        
        GridLayout grid2 = createSimpleGrid();
        layout.addComponent(grid2);

        layout.setExpandRatio(grid1, 0.5f);
        layout.setExpandRatio(grid2, 0.5f);

        return layout;
    }

    private GridLayout createSimpleGrid() {
        GridLayout grid = new GridLayout(3, 1);
        grid.setSizeFull();

        Label l = new Label("This is a very long label:");
        l.setWidthUndefined();
        grid.addComponent(l);

        TextField f = new TextField();
        f.setWidthUndefined();
        grid.addComponent(f);

        Label spacer = new Label( "&nbsp", ContentMode.HTML);
        grid.addComponent(spacer);
        grid.setColumnExpandRatio(2, 1.0f);

        return grid;
    }

}

18404.png
18405.png
18406.png