Skip to content

[css-flexbox] Clarify how to resolve flex item padding percentage values before flex container size is resolved #6510

Closed
@andyjakubowski

Description

@andyjakubowski

In 4.2. Flex Item Margins and Paddings, the Flexbox spec says that flex item padding percentage values should be resolved against the inline size of the containing block — the containing block being established the flex container’s content box. But there are times when the padding has to be resolved before the flex container’s content box size is calculated. What should such percentage values be resolved against in that case?

For example, imagine a flex-flow: column wrap flex container in a horizontal writing mode. In 5. Collect Flex Items Into Flex Lines, we use the outer hypothetical main size of each flex item to place them into flex lines. But the padding percentage value of such a flex item has to be resolved against the inline size of the flex container, which in this case corresponds to its cross size. And the cross size of the flex container isn’t determined until step 15.

Empirically, it seems like implementations (Blink, Gecko, WebKit) resolve those padding percentage values against the available inline space for the flex items. Additionally, the CSSWG had this resolution about resolving padding percentage values in Flexbox and Grid after #2085:

RESOLUTION: Both flexbox and grid items top and bottom margin and padding percent resolves against the available inline direction.

Is “available inline direction” the same as “available inline space”?

This treatment seems possible if available inline space for flex items is always a definite size. In my experience it is, but it’s not 100 % clear to me based on the spec. I asked a separate question about this: [css-flexbox-1] When can available space for flex items be infinite?.

Could you please clarify how the spec wants these padding percentage values to be resolved?

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