Skip to content

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

@alexgu754

Description

@alexgu754
Image

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>

"

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions