Flex Box Rendering issue while adding Flexible Layout(with 2 Columns) inside an Object Page

[apoorvsemwal]

Hello,

We have a requirement where we need to add a Flex Col Layout(with 2 columns) inside an Object page, and the second column of flex layout is also an Object Page.
Here is an isolated code sandbox we have implemented as a sample:
Codesandbox
We observe that when the ObjectPage is first rendered the Analytical table contained inside the FlexLayout has some additional space below it (which we believe corresponds to the height of the second column of this flex layout. )
In our case, the second col of the flex layout is also an Object Page.

However, once we click on any item (expands the second col of our flex layout) and close that object page the space below our analytical table is removed. From a UI perspective, this is exactly what we are expecting to see even when the component is rendered for the first time.

To make it more clear here are the steps with snapshots.
Step 1:

That red marked area is something that should not be there when the component first gets rendered.
(We believe it is due to the fact that there is Flex Box working behind the scenes whose height is being referred from the second column of the flex layout)

Step 2.
Next, we click on any item from the list and the second col gets expanded. We then close the second col via the close button.

As shown in the snapshot above there is no additional space below the Table - This is exactly the view we were expecting when the component first got rendered at Step1. We DONT want that extra space below the table when the component first gets rendered at Step 1

Any feedback on this would be highly appreciated.
Thanks