Skip to content

[css-flexbox] Baseline of inline-level flex container #13813

@SimonSapin

Description

@SimonSapin

Consider a test case like:

Text
<span style="display: inline-flex; flex-flow:column">
  <span>One</span>
  <span>Two</span>
<span>

The baseline of "Text" is aligned with the baseline of the outer span which almost certainly should be the baseline of "One", but when strictly reading the letter of the spec I’m not sure it’s actually defined.

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

In order for a flex container to itself participate in baseline alignment (e.g. when the flex container is itself a flex item in an outer flex container), it needs to submit the position of the baselines that will best represent its contents.

"participates in baseline alignment" links to the definition of align-self: baseline which only applies to flex items. So as written, I believe this does not apply to the test case above where the flex container isn’t itself a flex item nor does it have any flex item ancestor.

Later in this section there’s a special case for table cells:

When determining the baseline of a table cell, a flex container provides a baseline just as a line box or table-row does.

I don’t find a similar special case for inline-flex, but rather than add it I think it’d be better to rewrite the intro paragraph of this section to make it define the baseline of a flex container, for any purpose. (Including for the purpose of an ancestor flex item, table cell, or text line.) Perhaps reference https://drafts.csswg.org/css-align-3/#baseline-export for the concept. (Which by the way links back to #flex-baselines, suggesting this was already the intended meaning.)

For comparison, Grid defines a baseline without limiting its purpose:

https://drafts.csswg.org/css-grid-1/#grid-baselines

The first (last) baselines of a grid container are determined as follows:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions