Open Bug 1316534 Opened 3 years ago Updated 8 days ago

[css-flexbox] A non-default "flex-basis" incorrectly prevents min-size:auto from being clamped by specified size


(Core :: Layout: Flexbox, defect)

Not set



Webcompat Priority P1
Tracking Status
firefox52 --- wontfix
firefox68 --- affected


(Reporter: dholbert, Unassigned)


(Blocks 3 open bugs)


(Whiteboard: [webcompat])


(1 file)

Attached file testcase 1
[Filing this for a Gecko bug identified in ]

 1. Load attached testcase.

The purple div and green div should be equally wide, and should exactly fill the dotted border around them.

ACTUAL RESULTS: Purple bar is extra wide -- it shrinkwraps its content's size.

This is from us resolving "min-width:auto" on flex items:

Quoting the spec's summary of that section:
> In general, the automatic minimum size is the smaller of
> its content size and its specified size. 

We're letting the specified size ("width: 20px") win in the lower example, but not in the higher one. We're letting the "flex-basis" mess things up for some reason.
Summary: A non-default "flex-basis" incorrectly prevents min-size:auto from being clamped by specified size → [css-flexbox] A non-default "flex-basis" incorrectly prevents min-size:auto from being clamped by specified size
Looks like we correctly implemented the spec, but the spec changed.

Here's the old version of what is now called "specified size" in the min-width:auto flexbox spec text:
> clamped size
>    is defined if the item’s flex-basis is `main-size`
>    and its computed main size property is definite,
>    and is that size (clamped by its max main size property
>    if it’s definite).

The "if the item’s flex-basis is `main-size`" caveat there is what's tripping us up.  (That really means to say "if the item’s flex-basis is at its initial value" -- there was briefly a keyword called "main-size" in the spec which represented the initial value, but the initial value was later renamed back to "auto" rather than "main-size".)

So: we're only applying this specified-size clamping if the flex-basis is at its initial value, which is correct according to this old spec text, but incorrect according to the current spec.
Flags: needinfo?(dholbert)
The code that needs fixing is here (and currently basically corresponds to the old spec-text quoted in comment 1):
Too late for firefox 52, mass-wontfix.
Flags: needinfo?(dholbert)
Whiteboard: [webcompat]
Flags: needinfo?(dholbert)
Duplicate of this bug: 1391821
For CSS Grid, our automatic minimum size code was added in bug 1176775 (based on the more up-to-date spec text that we want to match here).

We may want to refactor things so that we share some of that code same code for flexbox here, to be sure this works the same & stays in sync between grid & flexbox.  Adding dependency.
Depends on: 1176775
Hmm, the "specified size" part is a bit more complicated for flexbox (as compared to grid).

For grid items, any percent "specified size" value must necessarily be indefinite, because the percentage gets resolved against the grid area, whose size is unknown because it depends on the item.  But for flex items, the percentage gets resolved against the flex container. So percent sizes on flex items may be definite, and we have to do some digging to find out.

[1] "specified size" here is defined as: "If the item’s computed main size property is definite, then the specified size is that size [...]"
Duplicate of this bug: 1429612
Duplicate of this bug: 1514891
Duplicate of this bug: 1331692
Component: Layout → Layout: Flexbox
Flags: needinfo?(dholbert)
Flags: webcompat?
Duplicate of this bug: 1535184

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Webcompat Priority: --- → ?

See bug 1547409. Migrating whiteboard priority tags to program flags.

Duplicate of this bug: 1468066
No longer blocks: 1468066
Duplicate of this bug: 1583063
Flags: needinfo?(dholbert)
Webcompat Priority: ? → P1
Flags: webcompat?
Flags: needinfo?(miket)
You need to log in before you can comment on or make changes to this bug.