Changing the internal size of the scroll Pane after reducing the scale of the canvas

Question

I implement the function of zoom out the field (Canvas) at the click of a button. In principle, everything works correctly, but when you zoom out, white areas appear in the scroll pane in the place where the canvas was.

All the options that I tried were provided in the code. Is it possible to make the inner area of the scroll pane change depending on the size of the canvas and get rid of the white areas?

public class GameView {
    @FXML public Canvas gameField;
    @FXML public ScrollPane scrollPane; 

public void doZoomOut() {
        Scale scale = new Scale(gameField.getScaleX() * 0.8, gameField.getScaleY() * 0.8);
        gameField.getTransforms().add(scale);

        scrollPane.resize(gameField.getWidth(), gameField.getHeight()); //doesn't work
        scrollPane.setPrefViewportWidth(gameField.getWidth()); //doesn't work
        scrollPane.setPrefViewportHeight(gameField.getHeight()); //doesn't work
        //Fit to Width/Height also doesn't work
        scrollPane.setPrefWidth(gameField.getWidth()); //doesn't work
    }
}

<ScrollPane fx:id="scrollPane" fitToHeight="true" fitToWidth="true" style="-fx-background-color: transparent;" stylesheets="@../../../style.css">
    <styleClass>
               <String fx:value="scroll-bar" />
               <String fx:value="corner" />
               <String fx:value="thumb" />
    </styleClass>
    <Canvas fx:id="gameField" height="700.0" width="1200.0" />
</ScrollPane>

Answer 1

If this can help anyone. The problem was solved by boxing the group. The solution was found using this post

public void doZoomOut() {
    //two lines added
    Group contentGroup = new Group(gameField);
    scrollPane.setContent(contentGroup);

    Scale scale = new Scale(gameField.getScaleX() * 0.8, gameField.getScaleY() * 0.8);
    gameField.getTransforms().add(scale);
}