W3C home > Mailing lists > Public > www-style@w3.org > November 2012

[css3-flexbox] Flex items with negative margins

From: Tony Chang <tony@chromium.org>
Date: Tue, 27 Nov 2012 13:24:59 -0800
Message-ID: <CAL-=4P0Ap8ond3B4JR1fAJ5tfAP4H6s9Q_RO9c6D6LycySsBFg@mail.gmail.com>
To: "www-style@w3.org" <www-style@w3.org>
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>

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

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:23 UTC