[css3-flexbox] Flexbox next to float

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 UTC