How do I make my VBox and Label resize according to texts in label in JavaFx?
<p><a href="https://i.stack.imgur.com/UiKDb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UiKDb.png" alt="enter image description here"></a></p>

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

<p>My FXML:</p>

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

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

&lt;/VBox&gt;
</code></pre>

<p>This <code>VBox</code> is inside the <code>GridPane</code>:</p>

<pre><code>&lt;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"&gt;
...
</code></pre>

<p><strong>Minimal, Complete, and Verifiable example</strong> as requested by @James_D</p>

<p>Main Class:</p>

<pre><code>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);
}
}
</code></pre>

<p>Controller Class:</p>

<pre><code>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 ");
    }
}
</code></pre>

<p>sample.fxml:</p>

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

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

<p></p>

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

<p><strong>Problem:</strong>
When I press 'Change' button, UI remains same not showing the full text.</p>