1244436 - CSS: absolutely-positioned pseudo-element on flexbox element messes up justified content

Status: VERIFIED DUPLICATE of bug 874718

(Core :: Layout: Positioned, defect)

Description

[github]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20160123151951

Steps to reproduce:

Create a div with `display: flex` and `justify-content: space-between`. Add two child elements with `width: 40%`. As expected, first child element is aligned left, and second element is justified to the right. 

Give the flex container `position: relative` and add a pseudo `:before` element with `position: absolute` and `left: 50%`. You can see this set up here: https://jsfiddle.net/u6mwmcbf/


Actual results:

The absolutely-positioned pseudo-element seems to interfere with the `justify-content` of child elements - the first div appears to be indented. Remove the pseudo-element, and the child divs are justified as expected.


Expected results:

The two child elements should remain justified (hard left and hard right), with the absolutely-positioned pseudo-element being positioned dead centre between the two. It is my understanding that absolutely-positioned elements should not interfere with the document flow.

You can view the same jsfiddle (https://jsfiddle.net/u6mwmcbf/) in Chrome or Opera for expected results.

Comment 1

[Daniel Holbert [:dholbert]]

Yeah, this is because our implementation of abspos stuff in a flex container is from an older version of the flexbox spec.

Bug 874718 is filed on updating that. Duping.

Comment 2

[Daniel Holbert [:dholbert]]

Verified locally that this was broken in Nightly 2016-10-31 & working in Nightly 2016-11-01, which means this is VERIFIED dupe of bug 874718.

(The functionality associated with bug 874718 first shipped in the 2016-11-01 nightly.)