1622176 - DevTools showing incorrect explanation for absolute positioning with Flexbox

Status: NEW

(DevTools :: Inspector: Layout, defect, P2)

Description

[Chen Hui Jing]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:76.0) Gecko/20100101 Firefox/76.0

Steps to reproduce:

Have an absolutely positioned flex item aligned with the align-self: flex-start property in a flex parent that has align-items: flex-end. The CSS is applied correctly and the layout is good. But in the DevTools, the inactive CSS feature is explaining things incorrectly.

Actual results:

The popover states that align-self has no effect on this element since it is not a grid or flex item.

Expected results:

The element is still a flex item, except that it does not participate in flex layout. However, the item is positioned as if it were the sole flex item in the flex container. Kindly refer to 4.1. Absolutely-Positioned Flex Children (https://www.w3.org/TR/css-flexbox-1/#abspos-items) of the specification for exact wording.

Comment 1

[Chen Hui Jing]

Attachment: Screenshot of inactive CSS feature popover

Comment 2

[Oriol Brufau [:Oriol]]

Note it's not a flex item, it's "an absolutely-positioned child of a flex container".

See https://drafts.csswg.org/css-flexbox-1/#flex-items

Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents.
Each in-flow child of a flex container becomes a flex item

Abspos children are not in-flow so they are not flex items.

But you are right, align-self does apply https://drafts.csswg.org/css-align/#align-self-property

Applies to: flex items, grid items, and absolutely-positioned boxes

Comment 3

[Chen Hui Jing]

I understand that it is no longer a flex item. I filed the bug on the wording of the pop-over for alignment properties.