- From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
- Date: Wed, 07 Jun 2023 16:13:32 +0000
- To: public-css-archive@w3.org
Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-flexbox] Resolving flexible lengths should avoid 0/0 and infinite loops == https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths can do `0/0` with ```html <div style="display: flex; width: 0px"> <div style="flex: 1 1 0px; margin: 1px"></div> </div> ``` > 1. Determine the used flex factor. The outer hypothetical main size is 2px, which is more that the container inner main size (0px), so we use the flex shrink factor. > 2. Each item in the flex line has a target main size, initially set to its [flex base size](https://drafts.csswg.org/css-flexbox/#flex-base-size). That's 0px. > 3. Size inflexible items No-op. > 4. Calculate initial free space That's `-2px`. > 5. Loop: > a. Check for flexible items No-op. > b. Calculate the remaining free space That's `-2px` > c. If the [remaining free space](https://drafts.csswg.org/css-flexbox/#remaining-free-space) is non-zero, distribute it proportional to the flex factors We use the [flex shrink factor](https://drafts.csswg.org/css-flexbox/#flex-flex-shrink-factor), so > For every unfrozen item on the line, multiply its flex shrink factor by its inner [flex base size](https://drafts.csswg.org/css-flexbox/#flex-base-size), and note this as its scaled flex shrink factor. Find the ratio of the item’s [scaled flex shrink factor](https://drafts.csswg.org/css-flexbox/#scaled-flex-shrink-factor) to the sum of the scaled flex shrink factors of all unfrozen items on the line. Set the item’s [target main size](https://drafts.csswg.org/css-flexbox/#target-main-size) to its flex base size minus a fraction of the absolute value of the [remaining free space](https://drafts.csswg.org/css-flexbox/#remaining-free-space) proportional to the ratio. That is, the scaled flex shrink factor is `1 * 0px = 0px`. There is a single item, so the sum of the scaled flex shrink factors is `0px`. Then the ratio is `0px / 0px = NaN`. Then we set the target main size to `0px - (-2px * NaN) = NaN * 1px`. > d. Fix min/max violations No-op, the target main size is still `NaN * 1px`. > e. Freeze over-flexed items The total violation is `NaN * 1px - NaN * 1px = NaN * 1px`. Therefore, we don't freeze any item. > f. Return to the start of this loop. And this is an infinite cycle. Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8928 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 7 June 2023 16:13:34 UTC