Javafx: Responsive design using a FlowPane

Question

I am trying to create a responsive layout using JavaFX FlowPlane. Inside a FlowPane I have placed two other Panes with text in them. Each Pane has a minWidth of 200px. prefWidth of 500px and maxWidth of 750px.

I would imagine that FlowPane could automagically resize the Pane inside it using the width values provided so that when I resize the window, the space in the FlowPane will be utilized in a best way.

Instead, it seems that the FlowPane only looks at the prefWidth property while it ignores minWidth and maxWidth. See the picture below:

Is there a way to have the blue StackPane stay in the top row, next to the red StackPane, shrink as the windows width decreases and only jump down to the second row when its width becomes less that its minWidth property?

Edit: Add FXML

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>


<FlowPane 
    cacheShape="false" 
    centerShape="false" 
    minWidth="500.0" 
    nodeOrientation="LEFT_TO_RIGHT" 
    prefHeight="150.0" 
    prefWidth="1000.0" 
    prefWrapLength="250.0" 
    rowValignment="TOP" 
    scaleShape="false" 
    style="-fx-background-color: white;" 
    xmlns="http://javafx.com/javafx/8.0.171" 
    xmlns:fx="http://javafx.com/fxml/1"
>
   <children>
      <StackPane 
        centerShape="false" 
        maxWidth="750.0" 
        minWidth="200.0"
        prefWidth="500.0" 
        scaleShape="false" 
        style="-fx-background-color: #ddaaaa;
        ">
         <children>
            <Label 
                alignment="TOP_LEFT" 
                text="I am a red StackPane. If you shrink this window, the blue panel will be below me! Min-width=200px, Pref-width=500px, Max-width=750px." 
                textOverrun="CENTER_WORD_ELLIPSIS" 
                wrapText="true"
            >
               <font>
                  <Font size="14.0" />
               </font>
            </Label>
         </children>
      </StackPane>
      <StackPane 
        alignment="TOP_LEFT" 
        cacheShape="false" 
        centerShape="false" 
        maxWidth="750.0" 
        minWidth="200.0" 
        prefWidth="500.0" 
        scaleShape="false"
      >
         <children>
            <Label 
                alignment="TOP_LEFT" 
                cacheShape="false" 
                centerShape="false" 
                scaleShape="false" 
                style="-fx-background-color: #dadaff;" 
                text="My min width is set to 200px; I should be able to handle some shrinking, but I don't ;( Min-width=200px, Pref-width=500px, Max-width=750px." 
                textOverrun="CENTER_WORD_ELLIPSIS" 
                wrapText="true" 
                StackPane.alignment="TOP_LEFT"
            >
               <font>
                  <Font size="14.0" />
               </font>
            </Label>
         </children>
      </StackPane>
   </children>
</FlowPane>