Skip to content

[css-flexbox-1][css-position-3] static position of abspos flex children #5843

Open
@fantasai

Description

@fantasai

@dholbert pointed out in #1432 (comment) #1432 (comment) and https://bugzilla.mozilla.org/show_bug.cgi?id=1682641#c9 that the newer CSS Positioned Layout model for handling the alignment properties and the flexbox spec conflict on a few points.

First, overall:

  • css-position defines abspos layout as creating an inset-modified containing block (where some of the insets are auto insets derived from the static position), and then applying alignment within that rectangle. It defines the auto offsets for a flex child to coincide with the content edges of its container.
  • css-flexbox sets the position of an abspos child more directly in https://drafts.csswg.org/css-flexbox/#abspos-items in normative prose by defining it as the position the item would have had as the sole flex item (but says something different, matching css-position, in the note in the same section).

A few places where this matters that @dholbert pointed out:

  • Per css-position, in a column flex container, the align-self property will apply in the block axis, not the main axis. But per css-flexbox, it will affect the static position in the main axis.
  • Per css-position, the justify-self property will affect the static position in the inline axis. Per css-flexbox, it can have no effect.
  • Per css-position, justify-content and align-content on the container have no effect on the child's static position. But per css-flexbox, they do.

We need to resolve these conflicts somehow.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions