[css-flexbox] Resolving flexible lengths should avoid 0/0 and infinite loops
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 24
Description
https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths can do 0/0 with
<div style="display: flex; width: 0px">
<div style="flex: 1 1 0px; margin: 1px"></div>
</div>
- 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.
- Each item in the flex line has a target main size, initially set to its flex base size.
That's 0px.
- Size inflexible items
No-op.
- Calculate initial free space
That's -2px.
- Loop:
a. Check for flexible items
No-op.
b. Calculate the remaining free space
That's -2px
c. If the remaining free space is non-zero, distribute it proportional to the flex factors
We use the flex shrink factor, so
For every unfrozen item on the line, multiply its flex shrink factor by its inner flex base size, and note this as its scaled flex shrink factor. Find the ratio of the item’s 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 to its flex base size minus a fraction of the absolute value of the 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the CSS Flexbox specification section linked in the issue, especially the “Resolve flexible lengths” algorithm, and reproduce the provided zero-width flex container example. Trace the flexible-length loop through scaled shrink factors and verify that the case no longer produces 0/0, NaN values, or an infinite cycle.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100