Skip to content

Margin auto allows negative values #978

Closed
@jacobp100

Description

Report

Issues and Steps to Reproduce

Create a setup like follows

<View style={{ height: 500 }}>
  <View style={{ flex: 0, height: 300 }} />
  <View style={{ flex: 0, marginTop: 'auto', height: 300 }} />
</View>

Or use playground link

Expected Behavior

The bottom view should overflow the parent (as happens on the web)

Actual Behavior

The bottom view gets a negative top margin applied, and overlaps the top view. Nothing overflows the parent

Link to Code

https://yogalayout.com/playground?eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwibWluV2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1heEhlaWdodCI6bnVsbCwiZmxleERpcmVjdGlvbiI6MCwicG9zaXRpb24iOnsidG9wIjpudWxsLCJyaWdodCI6bnVsbCwiYm90dG9tIjpudWxsLCJsZWZ0IjpudWxsfSwiY2hpbGRyZW4iOlt7IndpZHRoIjoiIiwiaGVpZ2h0IjoiMzAwIiwibWluV2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1heEhlaWdodCI6bnVsbCwicG9zaXRpb24iOnsidG9wIjpudWxsLCJyaWdodCI6bnVsbCwiYm90dG9tIjpudWxsLCJsZWZ0IjpudWxsfSwiZmxleFNocmluayI6IjAifSx7IndpZHRoIjoiIiwiaGVpZ2h0IjoiMzAwIiwibWluV2lkdGgiOm51bGwsIm1pbkhlaWdodCI6bnVsbCwibWF4V2lkdGgiOm51bGwsIm1heEhlaWdodCI6bnVsbCwibWFyZ2luIjp7InRvcCI6ImF1dG8ifSwicG9zaXRpb24iOnsidG9wIjpudWxsLCJyaWdodCI6bnVsbCwiYm90dG9tIjpudWxsLCJsZWZ0IjpudWxsfSwiZmxleFNocmluayI6IjAifV19

Notes

If you remove marginTop: auto you get the correct behaviour

I did find these few lines

I'm not sure what the logic of remainingFreeSpace is - if it should allow negative values or not. If it does allow them, it might just need a max(0, ...)

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions