Adobe Flex layout issue. nested containers inside VGroup, 100% height not working

Question

I have a nested layout which is dynamic (sizes are percentage values) or at least it should be.

I removed the text of the strings from the code:

<s:VGroup width="98%" height="70%" 
   horizontalAlign="center"
    horizontalCenter="0">
 <s:BorderContainer
  borderStyle="inset" borderWeight="1"
  cornerRadius="20"
  textAlign="center"
  width="100%" height="100%">
  <s:layout>
   <s:HorizontalLayout gap="0"
        verticalAlign="middle"/>
  </s:layout>
  <s:Label width="60%" height="100%"
     verticalAlign="middle"
     textAlign="right"/>
  <s:HGroup horizontalAlign="center" 
      width="40%" height="100%"
      gap="0">
   <s:Label height="100%" width="100%"
      verticalAlign="middle"
      textAlign="center"/>
   <s:Label height="100%" width="100%"
      verticalAlign="middle" />
  </s:HGroup>
 </s:BorderContainer>
 <s:BorderContainer
  borderStyle="inset" borderWeight="1"
  cornerRadius="20"
  textAlign="center"
  width="100%" height="100%">
  <s:layout>
   <s:HorizontalLayout gap="0"
        verticalAlign="middle"/>
  </s:layout>
  <s:Label width="60%" height="100%"
     verticalAlign="middle"
     textAlign="right"/>
  <s:HGroup horizontalAlign="center" 
      width="40%" height="100%"
      gap="0">
   <s:Label height="100%" width="100%"
      verticalAlign="middle"
      textAlign="center"/>
   <s:Label height="100%" width="100%"
      verticalAlign="middle" />
  </s:HGroup>
 </s:BorderContainer>
 <s:BorderContainer
  borderStyle="inset" borderWeight="1"
  cornerRadius="20"
  textAlign="center"
  width="100%" height="100%">
  <s:layout>
   <s:HorizontalLayout gap="0"
        verticalAlign="middle"/>
  </s:layout>
  <s:Label width="60%" height="100%"
     verticalAlign="middle"
     textAlign="right"/>
  <s:HGroup horizontalAlign="center" 
      width="40%" height="100%"
      gap="0">
   <s:Label height="100%" width="100%"
      verticalAlign="middle"
      textAlign="center"/>
   <s:Label height="100%" width="100%"
      verticalAlign="middle" />
  </s:HGroup>
 </s:BorderContainer>
 <s:BorderContainer
  borderStyle="inset" borderWeight="1"
  cornerRadius="20"
  textAlign="center"
  width="100%" height="100%">
  <s:layout>
   <s:HorizontalLayout gap="0" />
  </s:layout>
  <s:Label width="60%" height="100%"
     verticalAlign="middle"
     textAlign="right"/>
  <s:HGroup horizontalAlign="center" verticalAlign="middle"
      width="40%" height="100%" 
      gap="0">
   <s:Group width="100%" height="100%">
    <s:Rect width="80%" height="80%"
      horizontalCenter="0" verticalCenter="0"
      bottomLeftRadiusX="15" topRightRadiusX="15">
     <s:fill>
      <s:SolidColor color="0xFFFFFF" />
     </s:fill>
    </s:Rect>
    <s:Label height="100%" width="100%"
       verticalAlign="middle"
       textAlign="center"/>
   </s:Group>
   <s:Label height="100%" width="100%"
      verticalAlign="middle" />
  </s:HGroup>
 </s:BorderContainer>
</s:VGroup>

As you see in the picture the four "rows" are too high to fit into the component (which is as big as the black background).

I don't know how to fix this issue, do you have any hints?

This is a schematical example how it looks:

Answer 1

My guess is that you are trying to make the border containers fit within the constraints of the VGroup. One trick to make that work is to set minHeight="0" on each of the four BorderContainers to force a re-measure. If I'm way off the mark here please provide more information on what result you are looking for specifically. Hope that helps.