JavaFX: Labels in VBox getting overlapped

Question

I'm creating a video analysis system. At the moment I'm working on the player itself, using JavaFX. Next to my player, I want to have a list of marks placed during the analysis (see picture).

How I want it:

But then it overlaps...

Until it gets to this:

The list is getting created inside a VBox inside a ScrollPane. I've already considered using Text objects instead of Label objects, but I really want to use labels because I need to use their background property.

This code reproduces my problem:

package application;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Cursor;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.Separator;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Test extends Application {

    final Button button = new Button("Click me!");
    final VBox vb = new VBox();
    final ScrollPane sp = new ScrollPane(vb);

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        AnchorPane root = new AnchorPane();
        VBox v = new VBox();
        v.getChildren().addAll(button, sp);
        root.getChildren().add(v);

        sp.setFitToHeight(true);
        sp.setFitToWidth(true);
        sp.setMaxHeight(150);
        sp.setHbarPolicy(ScrollBarPolicy.NEVER);
        sp.setVbarPolicy(ScrollBarPolicy.ALWAYS);

        button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                addButton();
            }
        });

        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }

    public void addButton() {
        Button btn = new Button();
        btn.setStyle("-fx-background-color: null");
        btn.setPadding(Insets.EMPTY);
        String text = "Time: 00:00\nIt's very late!";
        btn.setText(text);
        btn.setOnMousePressed(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                btn.setStyle("-fx-background-color: #87CEFA");
            }
        });
        btn.setOnMouseReleased(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                btn.setStyle("-fx-background-color: null");
            }
        });
        btn.setCursor(Cursor.HAND);
        Separator sep = new Separator();
        vb.getChildren().addAll(btn, sep);
    }
}

Answer 1

Your problem is that you fit the height of the content of the ScrollPane to the height of the ScrollPane's viewport. Don't do this. Remove the following line:

sp.setFitToHeight(true);