How to make TextArea occupy whole space

Dear UI5 experts,

I'm creating a web page and encountered some difficulty. The page has one panel that contains three FlexBoxes. Each of FlexBox #1 and #2 occupies 10% of height, and FlexBox #3 occupies the remaining 80%. In FlexBox #3 I put a TextArea and I want it to occupy the whole FlexBox space. I set width="100%" and it works on width. However, setting height="100%" does not lead to what's expected. The TextArea is still small. I can set height to a specific number such "300px" and it can enlarge the TextArea, but this is not the ideal way.

Could you please let me know what should be the correct property settings?

Below is the code:

{code}

<Panel height="100%">

<FlexBox height="10%" alignItems="Center" justifyContent="Center">

<items>

<Button id="start" text="Start" width="100%" press="startTransmit">

<layoutData>

<FlexItemData growFactor="1" />

</layoutData>

</Button>

<Button id="stop" text="Stop" width="100%" press="stopTransmit">

<layoutData>

<FlexItemData growFactor="1" />

</layoutData>

</Button>

<Button id="close" text="Close" width="100%" press="close">

<layoutData>

<FlexItemData growFactor="1" />

</layoutData>

</Button>

</items>

</FlexBox>

<FlexBox id="transmitOptionBox" height="10%" alignItems="Center">

<items>

<ComboBox id="systemConnections">

<items>

<core:Item text="Network Connection" />

</items>

</ComboBox>

<CheckBox id="useOfflineConnection" text="Use Off-line connection (Xmit required)" />

</items>

</FlexBox>

<FlexBox height="80%">

<items>

<TextArea id="transmitStatus" width="100%" height="100%">

<layoutData>

<FlexItemData growFactor="1" />

</layoutData>

</TextArea>

</items>

</FlexBox>

</Panel>

{code}

And here is the screenshot of what I got so far:

Thanks a lot!

Jay