w3c / w3c/csswg-drafts

[css-flexbox] Resolving flexible lengths should avoid 0/0 and infinite loops

Open
#8,928 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-flexbox-1
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>
  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.

  1. Each item in the flex line has a target main size, initially set to its flex base size.

That's 0px.

  1. Size inflexible items

No-op.

  1. Calculate initial free space

That's -2px.

  1. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.