Re: [css3-flexbox] Flexbox next to float

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.

~TJ

Received on Tuesday, 8 May 2012 11:28:41 UTC