Weird transform.position behaviour

I am trying to show and position an element (A) under another one (B). They both use Absolute position.

I get A’s bottom left corner’s position with:

var pos = new Vector3(worldBound.xMin, worldBound.yMax);

Then I apply the position:

transform.position = position;
style.display = DisplayStyle.Flex;

Element’s A properties look like that:
6374610--709665--upload_2020-10-2_12-24-13.png

I expect that world bound of B would be:
x:120, y:241, width:81, height:177

But the results I get for element B are:
6374610--709668--upload_2020-10-2_12-24-38.png

I have no idea why it is displaying like this. The root VE is the screen (1920x1080) and A and B are the only 2 children atm.

Can someone please help me with this?

I’ve managed to fix that by setting the parent’s ‘justify-content’ to ‘flex-start’ (was ‘center’). However I still don’t understand why ‘justify-content’ influences the Absolute positioning.