flex-wrap + position relative has no effect along main axis, unlike in chrome

very basic, when a parent has flex-wrap, relative positioning along the main axis has no effect. this behaviour isn't seen in chrome. the first element has offset top:10 left:10, but as you see it's only moved down and not right..
kinda shocked and annoyed no one has fixed this or brought this up

"<Layout config={{useWebDefaults: false}}>
<Node
style={{
width: 200,
height: 250,
padding: 10,
flexWrap: 'wrap',
}}>
<Node style={{margin: 5, height: 50, width: 50, left:10, top:10, position:'relative'}} />
<Node style={{margin: 5, height: 50, width: 50}} />
<Node style={{margin: 5, height: 50, width: 50}} />
<Node style={{margin: 5, height: 50, width: 50}} />

"

vs chrome

"<style>
.box {
width:50px;
height:50px;
display:flex;
margin:5px;
background-color:yellow;
left:50px;
top:50px;
position:relative;
}
</style>

"

Start by reproducing the provided Yoga layout example and compare its wrapped flex item positions with the supplied Chrome HTML example. Trace the flex-wrap and relative-positioning behavior, then verify that the first item moves along both axes without changing the expected placement of the other items.