How do I make my VBox and Label resize according to texts in label in JavaFx?

Question

As you can see, my texts are constrained by labels. How do I make the label resize to exactly fit the text and also to resize the VBox and GridPane accordingly. I only want to resize vertically.

My FXML:

<VBox fx:id="body"
    alignment="TOP_CENTER"
    prefHeight="150"
    GridPane.vgrow="SOMETIMES"
    prefWidth="300"
    GridPane.columnIndex="0"
    GridPane.rowIndex="1" spacing="5">

    <Label alignment="CENTER" textAlignment="JUSTIFY" fx:id="word" maxWidth="268"/>
    <Pane prefHeight="10" VBox.vgrow="NEVER"/>
    <Label alignment="CENTER" textAlignment="JUSTIFY" wrapText="true" fx:id="meaning" maxWidth="268"  />
    <Label alignment="CENTER"  textAlignment="JUSTIFY" wrapText="true" fx:id="sentence" maxWidth="268" />

</VBox>

This VBox is inside the GridPane:

<GridPane fx:id="base"
      alignment="CENTER"
      prefHeight="210.0"
      maxWidth="310.0"
      stylesheets="@style.css"
      vgap="0" xmlns="http://javafx.com/javafx/8"
      xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="sample.Controller">
...

Minimal, Complete, and Verifiable example as requested by @James_D

Main Class:

public class Main extends Application {
private Stage stage;
private StackPane stackPane;
@Override
public void start(Stage primaryStage) throws Exception{
    stage = primaryStage;
    FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
    Parent root = (Parent) loader.load();
    stackPane = new StackPane(root);
    Scene scene = new Scene(stackPane);
    scene.setFill(Color.WHITE);
    stage.setScene(scene);
    stage.show();
}


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

Controller Class:

public class Controller implements Initializable{
    @FXML private Label label1;
    @FXML private Button changeLabel;
    private StringProperty labelString = new SimpleStringProperty();

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        labelString.setValue("aasdasd sad asdasd asdasda");
        label1.textProperty().bind(labelString);

    }
    @FXML
    public void clicked(MouseEvent e){
        labelString.setValue("asdsadasd asdasdasd sfdgsfwoef fgtrhfgbdrgdf dfgdfivbjkfd gdfgidfjvdf gdfgjldkvbdf gjdilgjdfv dfgojdflkgdf ");
    }
}

sample.fxml:

<GridPane fx:controller="sample.Controller"
      xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" maxHeight="Infinity">
<children>
    <VBox fx:id="body"
          alignment="CENTER"
          maxHeight="Infinity"
          GridPane.vgrow="SOMETIMES"
          prefWidth="300"
          GridPane.columnIndex="0"
          GridPane.rowIndex="1" spacing="5">

    <Label alignment="CENTER" VBox.vgrow="ALWAYS" wrapText="true" textAlignment="CENTER" fx:id="label1" maxWidth="268"/>
    <Button fx:id="changeLabel" text="Change" minWidth="50" onMouseClicked="#clicked" maxWidth="Infinity" />
    </VBox>
</children>

Expectation: When I press 'Change' button, Everything should resize to just give enough space for text to be shown.

Problem: When I press 'Change' button, UI remains same not showing the full text.

Answer 1

Assuming you want the text to wrap, the labels will need to be able to grow vertically. Add the attribute

maxHeight="Infinity"

to each label. You are also constraining the overall height of the VBox with prefHeight="150"; remove that attribute and let the VBox figure out its own height. Similarly, you probably want to remove the prefHeight attribute from the GridPane.