How to ensure a button bar remains visible at the bottom of a view

Flow
1

In this simple layout, the buttons show at the bottom of the screen, but when I expand enough of the Details, or make the window smaller, the buttons are pushed outside and I get two vertical scrollbars.

How can I make sure the buttons remain at the bottom?

image

Code:

@Route(value="/test2")
public class Test2 extends VerticalLayout {

    public Test2() {

        this.setSizeFull();

        var innerLayout = new VerticalLayout();
        innerLayout.setSizeFull();
        add(innerLayout);

        var buttonBarLayout = new HorizontalLayout(new Button("Button 1"), new Button("Button 2"), new Button("Button 3"));;
        add(buttonBarLayout);

        var tabSheet = new TabSheet();
        tabSheet.setSizeFull();
        innerLayout.add(tabSheet);

        var outerFormLayout = new VerticalLayout();
        outerFormLayout.setSizeFull();

        for(int sectionIdx=1; sectionIdx<5; sectionIdx++) {

            var formLayout = new FormLayout();
            for(int idx=1; idx<10; idx++) {
                formLayout.add(new TextField("Field " + idx));
            }

            outerFormLayout.add(new Details("Section " + sectionIdx, formLayout));

        }

        tabSheet.add("Tab 1", outerFormLayout);

    }

}
2

Answering myself; Adapting a stackoverflow suggestion:

I get

    public Test2() {

        this.setSizeFull();
        this.getElement().getStyle()
            .set("display", "flex")
            .set("flex-direction", "column");

        var innerLayout = new VerticalLayout();
        innerLayout.setSizeFull();
        innerLayout.getElement().getStyle()
            .set("flex", "1 1 auto")
            .set("overflow", "auto");

        add(innerLayout);

        var buttonBarLayout = new HorizontalLayout(new Button("Button 1"), new Button("Button 2"), new Button("Button 3"));
        buttonBarLayout.getElement().getStyle().set("flex", "0 0 auto");
...

That works. The button bar remains at the bottom, and the tab gets a scrollbar when the content gets too big.

3

You can probably do something similar also by wrapping the inner layout in a Scroller rather than using inline styles.