title: Javafx: Responsive design using a FlowPane
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>Instead, it seems that the FlowPane only looks at the prefWidth property while it ignores minWidth and maxWidth. See the picture below:</p>
  
  <p><a href="https://i.stack.imgur.com/xWCA9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xWCA9.png" alt="Example of the issue with the FlowPlane not respectin the minWidth property of inside StackPane"></a></p>
  
  <p>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?</p>
  
  <h2>Edit: Add FXML</h2>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import javafx.scene.control.Label?&gt;
  &lt;?import javafx.scene.layout.FlowPane?&gt;
  &lt;?import javafx.scene.layout.StackPane?&gt;
  &lt;?import javafx.scene.text.Font?&gt;
  
  
  &lt;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"
  &gt;
     &lt;children&gt;
        &lt;StackPane 
          centerShape="false" 
          maxWidth="750.0" 
          minWidth="200.0"
          prefWidth="500.0" 
          scaleShape="false" 
          style="-fx-background-color: #ddaaaa;
          "&gt;
           &lt;children&gt;
              &lt;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"
              &gt;
                 &lt;font&gt;
                    &lt;Font size="14.0" /&gt;
                 &lt;/font&gt;
              &lt;/Label&gt;
           &lt;/children&gt;
        &lt;/StackPane&gt;
        &lt;StackPane 
          alignment="TOP_LEFT" 
          cacheShape="false" 
          centerShape="false" 
          maxWidth="750.0" 
          minWidth="200.0" 
          prefWidth="500.0" 
          scaleShape="false"
        &gt;
           &lt;children&gt;
              &lt;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"
              &gt;
                 &lt;font&gt;
                    &lt;Font size="14.0" /&gt;
                 &lt;/font&gt;
              &lt;/Label&gt;
           &lt;/children&gt;
        &lt;/StackPane&gt;
     &lt;/children&gt;
  &lt;/FlowPane&gt;
  </code></pre>