[css3-flexbox] Flex items with negative margins

What should happen if a flex item has a negative margin?

Here's an example:
<div style="display:flex; width: 100px">
    <div id="a" style="flex: 1"></div>
    <div id="b" style="width: 10px"></div>
</div>

If we give #b a left margin of -50px, what should happen?  In ToT WebKit
and Gecko, this causes the available space to go from 90px to 140px and #a
flexes to fill this.  #a ends up being 140px wide, overflowing the flexbox.

I also get weird behavior when I set the cross axis margins to negative
values because we think there's additional space in the cross direction.

This seems very unintuitive.  I think the simplest thing to do is to treat
negative margins as 0 both for calculating available space and for
positioning.

tony

Received on Tuesday, 27 November 2012 21:25:26 UTC