It's a quirk of BorderPane, see the JavaDoc =>
http://docs.oracle.com/javafx/2/api/javafx/scene/layout/BorderPane.html
"BorderPane does not clip its content by default, so it is possible that childrens' bounds may extend outside its own bounds if a child's min size prevents it from being fit within it space."

I'm not such a big fan of JavaFX 2's BorderPane due to it's strange sizing behaviour for it's children.

A quick work around this quirk is to add the center content first so that it will be layered underneath the other panes in the BorderPane and have the root of the other child panes of your border pane be unbounded resizable Panes which fill their available area with an opaque color which will paint over the overflowing center pane.

Perhaps there is a related jira issue to make this simpler or more intuitive?
http://javafx-jira.kenai.com/browse/RT-17441 "add boolean clipContent property to Region to make it easier to turn clipping on/off for layout containers"

Yep, that's the original feature request I linked:
http://javafx-jira.kenai.com/browse/RT-17441 "add boolean clipContent property to Region to make it easier to turn clipping on/off for layout containers"

The overlap occurs because by default all of the JavaFX panes don't clip transformed content.

Normally the transformation properties such as scaleX or translateX are used when animating a node, and often when doing animations you don't want to clip the transformed node to a container (at least I think that's the reasoning?).

Rather than translating the group, you can use a method like group.relocate which will adjust the group's layoutX and layoutY values, in which case it won't spill outside the bounds of the layout bounds (because you are adjusting the layout bounds).

If you can't just relocate the Group and need to perform animations or adjust transforms like translate on the Group and you need to keep the Group within reasonable layout bounds, then you can do one of three things:

1. Wrap the Group in another Group - the outer group will then have the layoutBounds of the boundsInParent of the child group, thus the layoutBounds of the outer group will include the transforms applied to the child group.
2. Place the Group in a ScrollPane - then it can take on it's own independent self-contained co-ordinate system which will never overlap any parent nodes.
3. Set a clip on the Group (as the linked issue suggests), so that any portion of the transformed node which falls outside of it's layout bounds is clipped.

Thanks for this detailed answer. I overlooked your last link to the setclip.

Firstly i tried the ScrollPane, however this didn't look that good. (For some reason the pane didn't use the whole VBOX space left).

Then I tried the setClip method and this looked better. In this case I'm using a Rectangle with it's width bound the the vBox (the parent) width minus the first panels' width. I assume that there might be a better way, but at least in this case I understand totally what I'm doing ;-) .