Grow ListView width to fit contents and remove horizontal scrollbar

Question

I want to place a ListView next to a ScrollPane. But when the dynamic contents of the ListView are too wide, I want the ListView to become wider to fit it's contents. In the Image provided you can see how It creates a Scrollbar instead of widening the ListView.

As I am new to JavaFX I have no Idea how to achieve such behavior. How can I make the ListView become wider to fit it's contents automatically? Can this be done entirely in FXML?

Here is my FXML for the part of the UI I am concerned about:

<HBox prefHeight="480.0" prefWidth="640.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="28.0">
  <children>
    <ListView fx:id="componentList" prefHeight="-1.0" prefWidth="-1.0" HBox.hgrow="NEVER" />
    <ScrollPane hbarPolicy="ALWAYS" pannable="true" prefHeight="200.0" prefWidth="200.0" vbarPolicy="ALWAYS" HBox.hgrow="ALWAYS">
      <content>
        <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="2000.0" prefWidth="2000.0">
          <children>
            <Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="200.0" layoutX="67.0" layoutY="45.0" stroke="BLACK" strokeType="INSIDE" width="200.0" />
          </children>
        </AnchorPane>
      </content>
    </ScrollPane>
  </children>
</HBox>