How to dynamically set height of iFrame in a SAP UI5 application?

Hi All,

I am trying to add an iFrame inside an HBox which has 2 child elements -VBox which has a bunch of controls and second is the iFrame using <html:iframe>. The behavior of the HBox changes from flex-direction=column to row as the browser is resized - I created a CSS rule for this so that VBox takes the 100% and the second element is displayed below the VBox.

The iframe works fine with height="100%" if I set the position="absolute" but if I resize the browser- the iFrame is not visible when the HBox changes its flex direction. Ideally the iFrame should move below the VBox. It only works if I delete the position="absolute" and hardcode the height to say, height="800px".

Is there a way I can still keep the height dynamic or 100%? Now if I keep height="100%", it just shows maybe 20% of the iFrame.

Below is the code inside the HBox:

<HBox class="mainContentContainer" justifyContent="SpaceBetween" alignItems="Stretch">

          //VBox which is the first child containing some controls

          //iframe html injection

</HBox>

mainContentContainer CSS is as:

.mainContentContainer > .sapMFlexItem {

  flex-grow: 1;

}

<html:div style="width:100%;height:100%;"><html:iframe style="width:100%;height:1000px;" src="http://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.SearchField/events" frameBorder="0"></html:iframe></html:div>