W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2021

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

From: Andy Jakubowski via GitHub <sysbot+gh@w3.org>
Date: Wed, 11 Aug 2021 14:21:31 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-966813951-1628691689-sysbot+gh@w3.org>
andyjakubowski has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox] Clarify how to resolve flex item padding percentage values before flex container size is resolved ==
In [4.2. Flex Item Margins and Paddings](https://drafts.csswg.org/css-flexbox-1/#item-margins), 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 the flex container. But there are times when the padding has to be resolved before the flex container inline size is known. 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](https://drafts.csswg.org/css-flexbox-1/#algo-line-break), 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](https://drafts.csswg.org/css-flexbox-1/#algo-cross-container).

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](https://github.com/w3c/csswg-drafts/issues/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?](https://github.com/w3c/csswg-drafts/issues/6476).

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6510 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 11 August 2021 14:21:32 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:42 UTC