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

Re: [css3-flexbox] Flexbox next to float

From: Morten Stenshorne <mstensho@opera.com>
Date: Tue, 08 May 2012 13:31:10 +0200
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style@w3.org
Message-ID: <871umuzz7l.fsf@aeneas.oslo.osa>
"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.

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

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