Re: [csswg-drafts] [css-flexbox] Absolute Positioned Elements in Flex Containers Removes Common Layout Patterns

It's a bit easier to describe where the item "would have been" in block layout than in flexbox. Some of the complicating factors are the fact that flex layout can wrap -- the abspos element will arbitrarily associate itself with the previous element rather than the next one after the break -- and the way that spacing works -- if the author specifies 'space-around', where does the item go? Before the space? After it? Halfway in between? What about at the edges of the flex container (rather than between two items)? Should it increase the spacing?

In implementations that had the abspos take a position in the flow, the existence of the abspos affected layout, and that's not something that seemed appropriate. So we tried to simplify the static position calculation in order to get a result where it really didn't affect layout and ended up here, which isn't ideal for your use cases. Possibly if we'd understood your problem here sooner, Tab and I would have pushed harder to solve the 'space-around' case and keep the static position as the "hypothetical position", but I suspect it's too late to make such a change at this point. (I also have no idea how one would do the equivalent thing in Grid, and we do want to keep Grid and Flexbox consistent.)

But let's go back to Christian's suggestion--it seems to me that would get you what you want (except in the 'space-around' cases, which were previously broken anyway). If your item itself needs a width, there are two ways to handle it: if the border-box width is known, set a negative margin equivalent to that. If not, wrap it in a zero-sized element and let it overflow that element. This technique should also work in other layout modes as well--particularly the latter one, if the actual element is an abspos inside the wrapper then it shouldn't affect margin collapsing, either.

Anyway, nobody's commented here except Christian so I'll Agenda+ to see if anyone in the WG has thoughts.

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/401#issuecomment-286486848 using your GitHub account

Received on Tuesday, 14 March 2017 16:55:38 UTC