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

[css3-flexbox] Flexbox next to float

From: Morten Stenshorne <mstensho@opera.com>
Date: Tue, 08 May 2012 12:55:28 +0200
To: www-style@w3.org
Message-ID: <87ehqvyman.fsf@aeneas.oslo.osa>
Hi,

I think that block-level flexboxes should behave similarily to tables or
new-BFC blocks, when it comes to what CSS 2.1 has to say about
overlapping of such boxes:

http://www.w3.org/TR/CSS2/visuren.html#bfc-next-to-float

That is, I was thinking that the _border_ box of a flexbox must not
overlap the margin box of any floats in the same block formatting
context as the element itself.

The flexbox spec (2012-05-01) is almost clear on this topic:

http://dev.w3.org/csswg/css3-flexbox/#display-flexbox

by saying that a flexbox establishes a new flexbox formatting context,
and that it is _similar_ to to a block formatting context root, in that
floats do not intrude into the flexbox.

As far as I can see, only IE10 gets this completely right, while Gecko
and especially Webkit have issues (-webkit-flexbox has more problems
than -webkit-box here in my Chrome). Negative margins is the key here.

    <p>Below there should be a yellow square beside a blue square, right?</p>
    <div style="float:left; width:100px; height:100px; background:yellow;"></div>
    <div style="display:-moz-box; display:-ms-box; display:-webkit-box; display:flexbox; margin-left:-100px; width:100px; height:100px; background:blue;"></div>

I suspect this is simply about implementation bugs, but perhaps the spec
could be a little clearer?

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
---- Office: +47 23693206 ---- Cellular: +47 93440112 ----
------------------ http://www.opera.com/ -----------------
Received on Tuesday, 8 May 2012 10:56:53 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:53 GMT