Re: [css3-flexbox] absolutely positioned flex item should not have side effect on space distribution

On Wed, 25 Jul 2012 23:04:27 +0200, fantasai  
<fantasai.lists@inkedblade.net> wrote:

> Here's a proposal:
>
>    # The hypothetical box used to calculate the static position [CSS21]
>    # of an absolutely-positioned flex item corresponds to that of an
>    # anonymous empty flex item whose main-axis position coincides with
>    # the main-start edge of the subsequent real flex item on the flex  
> line
>    # and, being hypothetical, has no effect on flex layout.
>    # If there is no subsequent real flex item, the hypothetical box's
>    # main-axis position is that of a hypothetical last item on the flex
>    # line, after any packing spaces that were introduced around any
>    # previous real items due to ‘content-justify: space-around’.


This sounds quite reasonable to me, and I am happy to resolve on that.

> There are two edge cases:
>    1. If the item appears at a wrap point. This text places it on the
>       previous line. Removing "on the flex line" would place it on the
>       next line.

Removing "on the flex line" first seemed to me to be an improvement,
as it reduces the chances that we'd end up overflowing the viewport,
but it seems overall closer to "Rosen's principles", so keeping
it the way you wrote is probably best.

That said, this seems to be an area where we don't have full
interoperability, so evaluating Rosen's principles is hard.
Consider the simple demo below, and resize the browser window
down. Opera, firefox and webkit behave in subtly different ways.

<p>yadayada yadayade yadayadi <span style="position:absolute>####</span>  
foobar barbaz</p>

All browsers have #### on top of foobar when the line is long enough.

Opera keeps #### at the same position when the window is small enough to  
send foobar on the second line, and buts #### back on top of foobar, when  
the window is small enough to push both yadayadi and foobar on the second  
line.

Firefox behaves almost the same, except that when foobar is moved the the  
second line, #### is moved back 1 character, making the first line ending  
in "yadayadi####" rather than "yadayadi ####"

Chrome keeps #### at the same position when the window is small enough to  
send foobar on the second line, if the windows get a little bit bit  
smaller (so that there is no more room on the first line for the space  
that preceded foobar?), #### (but not yadayadi) is moved to the second  
line, when the window gets even smaller both yadayadi and foobar go on the  
second line and #### overlaps foobar. Had there been no space between  
</span> and foobar in the markup, #### would be moved to the second line  
as soon as foobar goes there. Also (but I suspect that's a bug), the  
behavior when enlarging the window again isn't symmetrical when there is a  
space between </span> and foobar, and #### moves back up to the  
*beginning* of the first line first, before going back on top of foobar  
when foobar fits on the first line.

I may be biased, but Opera seems to have the sanest behavior here, so I am  
taking that as my way to evaluate what "Rosen's principles" would lead us  
to do, and that makes me agree with your proposal.

I don't have IE, but I wonder what it does.

  - Florian

Received on Thursday, 26 July 2012 09:17:38 UTC