`position: absolute` children are always positioned on the parent's top/left corner, instead of being positioned according to the flex algorithm.
https://www.w3.org/TR/css-flexbox-1/#abspos-items says that the item should be positioned "as if it was the sole child" of the flex container,
but it ignores the align-items/justify-content settings of the flex container in WebKit. It is correctly positioned in Blink, for example.
The following jsfiddle has a runnable reproduction https://jsfiddle.net/f63zeeta/
For the record, here is the HTML source:
Here is the CSS source:
The bug is still there even in latest safari Version 13.0.1 (14608.2.11.1.11).
I think the patch for bug 213110 might have fixed this.
This bug is not reproducible anymore in the latest Safari Version 15.1 (176188.8.131.52.20).
Right, let's close this, bug 213110 has likely fixed it.