[css-flexbox] Absolute Positioned Elements in Flex Containers Removes Common Layout Patterns

[jlukic]

https://drafts.csswg.org/css-flexbox/#abspos-items

Currently Flexbox spec does not allow absolutely positioned elements inside a flex container to preserve their calculated position when using top: auto; or left:auto; (its initial value).

Here's an example of this behavior in both flex and normal containers.
https://jsfiddle.net/91tn25zn/

Outside of flex containers using auto positioning values behaves this way, so this is new behavior added in flex.

This behavior inside flex containers removed a very important method for positioning elements in CSS, allowing elements to exist outside of page flow but preserve their calculated positions. For example this breaks all vertical dividers in Semantic UI which represents a common design pattern of adding elements which do not participate in layout, but are used for styling based on their rendered position.

[cbiesinger]

@gregwhitworth @tabatkins @fantasai

[fantasai]

I'm confused. Why is this divider absolutely-positioned? Why not be in-flow?

[jlukic]

So that the dividers dont affect layout. In this case, the spacing between grid columns should remain the same regardless of whether user elects to add vertical dividers. (Not jump over by 1px)

Since grid columns are frequently percentage based, the additional pixel will also break the percentage ratios (i.e. 25% + 25% + 25% +25% + 1px).

[cbiesinger]

You can give them a zero width and just let it overflow

[jlukic]

And in the case that overflow or width is necessary for styling? For example background color in the divider case is filled based on width. Using alternatives like border-width will also cause it to have width that affects layout.

And also, why exactly should left: auto operate differently inside a flex container?