Why does adding another element to a BorderPane mess up my formatting?

Question

When creating a GridPane in the Center of a BorderPane it is quadratic and everything is fine:

even when having an uneqal amount of columns and rows everything works perfectly:

but as soon as I add a VBox or any other element to the left slot of the BorderPane it looks like this:

I need the GridPane to stay quadratic, at least after being created. When resized it is not important for the cells to stay quadratic but they should be initally.

I also tried wrapping the GridPane in a VBox and that VBox in a HBox and binding their Height and Width Properties, but that only makes the cells maintain the same size.

Basically I want it to initally look like this:

I think if it was possible to tell the GridPane to not fill the empty spaces upwards, downwards and sitewise then it would be easy.

fxml File:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.*?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.UserInterfaceController">
   <center>
      <GridPane fx:id="grdPn" gridLinesVisible="true" onMouseClicked="#onGrdPnMouseClicked">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30.0" />

      
      
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
      </GridPane>
   </center>
   <left>
      <VBox prefHeight="306.0" prefWidth="100.0" BorderPane.alignment="CENTER" />
   </left>
</BorderPane>

Creating the stage and scene:

        FXMLLoader fxmlLoader = new FXMLLoader(ApplicationMain.class.getResource("sample.fxml"));
        Scene scene = new Scene(fxmlLoader.load());
        stage.setTitle("Example");
        stage.setScene(scene);
        stage.show();

If you remove the VBox the GridPane becomes square again.

EDIT: My work-around was to just make sure the GridPane is always bigger than the VBox, then the VBox would be the element that would change the size and the GridPane's cell would be quadratic. BUT I tried the solution marked below and it works for me.

kleopatra's advice also helped a lot. Thanks everyone.

Answer 1

Here is an example that I hope can help you. My guess is GridPane Max Height = USE_PREF_SIZE is what you are looking for.

FXML

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<BorderPane xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" maxHeight="-Infinity" maxWidth="-Infinity" fx:controller="gui.UserInterfaceController">
   <left>
      <VBox prefHeight="306.0" prefWidth="100.0" style="-fx-border-color: black;" BorderPane.alignment="CENTER">
         <BorderPane.margin>
            <Insets bottom="10.0" left="10.0" top="10.0" />
         </BorderPane.margin>
      </VBox>
   </left>
   <center>
      <GridPane fx:id="grdPn" gridLinesVisible="true" maxHeight="-Infinity" onMouseClicked="#onGrdPnMouseClicked" BorderPane.alignment="CENTER">
         <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="40.0" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="40.0" vgrow="SOMETIMES" />
            <RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="40.0" vgrow="SOMETIMES" />
         </rowConstraints>
         <BorderPane.margin>
            <Insets right="10.0" />
         </BorderPane.margin>
      </GridPane>
   </center>
</BorderPane>

Output