flex-wrap + position relative has no effect along main axis, unlike in chrome
Author: alexgu754Created Sep 18, 2025Updated Mar 19, 2026
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
"
Source: react/yoga