Groups ignore underlying component's maxwidth - apache-flex

Question

In the following code you can see that I have 2 identical bordercontainers (bordercontainer1 & bordercontainer2) with each a surrounding group (surroundinggroup1 & surroundinggroup2).
The bordercontainers have a maxwidth of 250 pixels and a width of 100%.
Basically, I want them to take up to 250 pixels of space but if there is less space available, take up as much as possible.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:HGroup id="maingroup" width="100%">
<s:Group id="surroundinggroup1">
<s:BorderContainer id="bordercontainer1" height="50" maxWidth="250" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
<s:Group id="surroundinggroup2">
<s:BorderContainer id="bordercontainer2" height="50" maxWidth="250" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
</s:HGroup>
</s:WindowedApplication>
The problem is that the surroundinggroups seem to ignore the maxwidth and use the minimum width needed to draw the bordercontainer so that the label containing "test" fits:
I figured setting the surrounding groups width to 100% would solve the issue but this causes the surroundinggroups to take up as much space as possible causing a gap between the 2 bordercontainers:
The only solution seems to be to remove the surroundinggroups, then the layout is as I want it:
The problem here is that, in the real application, these surroundinggroups contain some other components and logic. Removing them would could cause quite some other changes.
Is there no way to achieve the desired outcome (image 3) while keeping these surroundinggroups?

Answer 1

This should do the trick, for some reason I thought that you didn't want size constraints on the surrounding group, but that was just in my head. I moved the maxWidth and 100% to the surroudinggroups, the Bordercontainer width="100%" is also important for what you want.
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:HGroup id="maingroup" width="100%" >
<s:Group id="surroundinggroup1" maxWidth="250" width="100%">
<s:BorderContainer id="bordercontainer1" height="50" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
<s:Group id="surroundinggroup2" maxWidth="250" width="100%">
<s:BorderContainer id="bordercontainer2" height="50" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
</s:HGroup>
</s:WindowedApplication>