Chrome Version: 71.0.3569.0 (Official Build) dev (64-bit)
OS: Ubuntu 18.10 beta

What steps will reproduce the problem?
(1) Visit https://jsfiddle.net/gyq6p18t/

What is the expected result?
- No red should be visible.
- (Also: the left boxes should contain two green squares, and the right boxes should show one green square)

What happens instead?
- A red box is visible, just below the bottom right box.
- The bottom left box only shows one green square (i.e. its two children are superimposed when they shouldn't be).


Firefox 62 and Edge 17 each give the expected results.

NOTES / SPEC LINKS:
The boxes here are demonstrating the static position of an abspos child of a flex container, and how the container's "align-items" value (i.e. the children's "align-self" value) influences that determination.

The spec text on this is here:
https://drafts.csswg.org/css-align/#align-abspos
https://drafts.csswg.org/css-align/#valdef-self-position-end
https://drafts.csswg.org/css-align/#valdef-self-position-flex-end

Quoting:
  - The alignment subject is "the [abspos] box’s margin box"
  - The alignment container is "the containing block" (i.e. the flex container)
  - ...and "flex-end" alignment is supposed to "[align] the alignment subject to be flush with the alignment container’s end edge in the appropriate axis."

(technically 'flex-end' behaves as 'end' in this case, but it doesn't really matter because the end edge and the flex-end edge are the same.)

So for the second row of the testcase, the bottom of the child's margin-box **should** be aligned with the bottom of the container (so "margin-bottom" should put the squares in 2 different spots in the bottom left box, and "margin-top" should have no effect in the bottom right box).

But that's not what Chrome's doing -- instead, it seems like Chrome's aligning the alignment subject's border box to the edge of the alignment container, and then adding "margin-top" as a supplemental offset, or something...?