Building dynamic UI using JavaFX

I'm new to JavaFx and trying to build the following screen with three StackPane that can dynamicall grow and shrink the width and height depending on the window size. I tried different ways but was not able to achieve this. I also tried using AnchorPane constraints. here is the image of what i'm trying to achieve and corresponding FXML. here is are the constraints I'm looking between these panes

• Left Pane to have a max width (300px) and min 150
• distance between left and right(2) stack panes should remain constant
• distance between right top and bottom stack panes should remain constant
• left top stack pane to have max height of 250px

<!-- language: lang-xml -->

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

<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity"
	minHeight="-Infinity" minWidth="-Infinity" prefHeight="437.0"
	prefWidth="736.0" xmlns="http://javafx.com/javafx/11.0.1"
	xmlns:fx="http://javafx.com/fxml/1">
	<children>
		<StackPane layoutX="14.0" layoutY="27.0" prefHeight="405.0"
			prefWidth="223.0" style="-fx-background-color: white;"
			AnchorPane.bottomAnchor="12.0" AnchorPane.leftAnchor="15.0"
			AnchorPane.topAnchor="20.0">
			<effect>
				<DropShadow />
			</effect>
		</StackPane>
		<StackPane layoutX="251.0" layoutY="21.0" prefHeight="119.0"
			prefWidth="470.0" style="-fx-background-color: #ffffff;"
			AnchorPane.leftAnchor="251.0" AnchorPane.rightAnchor="15.0"
			AnchorPane.topAnchor="21.0">
			<effect>
				<DropShadow />
			</effect>
		</StackPane>
		<StackPane layoutX="251.0" layoutY="150.0"
			prefHeight="269.0" prefWidth="470.0"
			style="-fx-background-color: #ffffff;" AnchorPane.bottomAnchor="13.0"
			AnchorPane.leftAnchor="251.0" AnchorPane.rightAnchor="15.0">
			<effect>
				<DropShadow />
			</effect>
		</StackPane>
	</children>
</AnchorPane>

You just needed to set some max-widths and max-heights.

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<StackPane layoutX="14.0" layoutY="27.0" maxWidth="400.0" prefHeight="405.0" prefWidth="223.0" style="-fx-background-color: white;" AnchorPane.bottomAnchor="12.0" AnchorPane.leftAnchor="15.0" AnchorPane.topAnchor="20.0" HBox.hgrow="ALWAYS">
<effect>
<DropShadow />
</effect>
<HBox.margin>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</HBox.margin>
</StackPane>
<VBox maxHeight="1.7976931348623157E308" HBox.hgrow="ALWAYS">
<children>
<StackPane layoutX="251.0" layoutY="21.0" maxHeight="1.7976931348623157E308" prefHeight="119.0" prefWidth="470.0" style="-fx-background-color: #ffffff;" AnchorPane.leftAnchor="251.0" AnchorPane.rightAnchor="15.0" AnchorPane.topAnchor="21.0" VBox.vgrow="ALWAYS">
<effect>
<DropShadow />
</effect>
<VBox.margin>
<Insets bottom="5.0" left="10.0" right="10.0" top="10.0" />
</VBox.margin>
</StackPane>
<StackPane layoutX="251.0" layoutY="150.0" maxHeight="1.7976931348623157E308" prefHeight="269.0" prefWidth="470.0" style="-fx-background-color: #ffffff;" AnchorPane.bottomAnchor="13.0" AnchorPane.leftAnchor="251.0" AnchorPane.rightAnchor="15.0" VBox.vgrow="ALWAYS">
<effect>
<DropShadow />
</effect>
<VBox.margin>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</VBox.margin>
</StackPane>
</children>
</VBox>
</children>
</HBox>

You might need to play with the max-width of the left-panel

Thanks everyone for the help. I found a way to do it using the GridPane(root pane), VBox, Anchor and stack panes . . Here is the fxml for that

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<ScrollPane fitToHeight="true" fitToWidth="true" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
<content>
<GridPane hgap="10.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="700.0" minWidth="700.0" style="-fx-border-width: 20px; -fx-border-color: white;">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="347.79999389648435" minHeight="10.0" prefHeight="139.0000061035156" vgrow="SOMETIMES" />
<RowConstraints maxHeight="309.79999389648435" minHeight="10.0" prefHeight="180.00003662109373" vgrow="SOMETIMES" />
<RowConstraints maxHeight="204.79996337890628" minHeight="10.0" prefHeight="204.79996337890628" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<VBox prefHeight="479.0" prefWidth="274.0" spacing="10.0" style="-fx-background-color: blue; -fx-border-insets: 10;" GridPane.rowSpan="2147483647">
<effect>
<DropShadow />
</effect>
</VBox>
<VBox prefHeight="200.0" prefWidth="100.0" spacing="10.0" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowSpan="2147483647">
<children>
<AnchorPane prefHeight="178.0" prefWidth="547.0" style="-fx-background-color: green;">
<effect>
<DropShadow />
</effect>
</AnchorPane>
<StackPane maxHeight="1.7976931348623157E308" prefHeight="403.0" prefWidth="547.0" style="-fx-background-color: yellow;" VBox.vgrow="ALWAYS">
<effect>
<DropShadow />
</effect>
</StackPane>
</children>
</VBox>
</children>
</GridPane>
</content>
</ScrollPane>

One I added this this my borderpane here is how it looked