FlexLayout Add-on with Vaadin 8: Spacing and scrollbar problem

Flow
1

I am testing the FlexLayout Add-on but I did run in a few problems. Basically I have a FlexLayout with two buttons that should align on the right.

public class ViewName extends Panel implements View {

public ViewName() {
		setSizeFull();
		VerticalLayout mainLayout = new VerticalLayout();
		setContent(mainLayout);
		// layout for the 2 buttons
		FlexLayout backButtonLayout = new FlexLayout();
		backButtonLayout.setSizeFull();
		backButtonLayout.setFlexDirection(FlexDirection.Row);
		backButtonLayout.setFlexWrap(FlexWrap.Wrap);
		backButtonLayout.setJustifyContent(JustifyContent.FlexEnd);
		mainLayout.addComponent(backButtonLayout);
		mainLayout.setComponentAlignment(backButtonLayout, Alignment.TOP_RIGHT);
		// back to all probes button
		Button btn1 = new Button("Back to overview");
		btn1.addStyleName("primary");
		btn1.addClickListener(e -> {
			UI.getCurrent().getNavigator().navigateTo("overview");
		});
		// back to start page button
		Button btn2 = new Button("Back to start page");
		btn2.addStyleName("primary");
		btn2.addClickListener(e -> {
			UI.getCurrent().getNavigator().navigateTo("start");
		});
		backButtonLayout.addComponent(btn1);
		backButtonLayout.addComponent(btn2);

With this code I get a scrollbar next to the right button (see attachment). With a HorizontalLayout I never got the scroll. How do I get rid of the annoying scroll??

I also would like to have a small space between the 2 buttons. How??

How to use CSS for FlexLayout??

Thanks for your help!

17612101.png

2

To get rid of the scroll bar I had to set the margins for the buttons in the CSS. I added

margin: 15px 10px;

to v-button. This also adds a space between the buttons.