Re: [css3-flexbox] Flexbox next to float

On 08/05/2012 13:31, Morten Stenshorne wrote:
> "Tab Atkins Jr."<jackalmage@gmail.com>  writes:
>
>> On Tue, May 8, 2012 at 12:55 PM, Morten Stenshorne<mstensho@opera.com>  wrote:
>>> 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?
>>
>> I think it's just impl bugs.  I'm not sure how to produce a better
>> phrasing, unfortunately.
>
> I was thinking that you could mention that it's the _border box_ of the
> flexbox that should not overlap with the margin box of any surrounding
> floats.

I think perhaps the vagueness is for the best at the moment, given that 
there is non-interop on how CSS21 BFCs interact with floats; eg see the 
thread which ends with [1,2].

It may be that we tighten this in CSS3... but I think that that should 
be done in the float spec, not in specs like flexbox.  If that happens 
in such a way that the talk about border box (as opposed to margin box) 
becomes incorrect in all or some circumstances, it would be nice if 
css3-flexbox didn't need to be updated.  In short, I think 
implementations should probably copy whatever they themselves do in the 
case of other BFCs next to floats, even if it's not currently 
interoperable.  (It's interoperable with that implementation's own 
behaviour, which I think might be more important that cross-browser 
interop in this case.)

[1] http://lists.w3.org/Archives/Public/www-style/2009Feb/0626.html
[2] http://lists.w3.org/Archives/Public/www-style/2009Mar/0279.html

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Tuesday, 15 May 2012 19:46:01 UTC