Log in Try the demo

Loading…

Dataset 20261011-0550-f160c57 · measured 2026-10-11 05:50 UTC

flex-basis

◐matches Chrome on some values10 of 11 examples match Chromecss-flexbox-2

Some of the examples match Chrome and some do not. The count beside the verdict says how many — 11 of 12 — and the values that differ are listed on the property page. It is neither a pass nor a failure, and filing it under either would be a lie in one direction.

Here: 10 of 11 examples match Chrome. The one that does not: flex-basis:stretch — shown first below, each with its difference map.

What the specification says

Initial value: auto
Applies to: flex items
Inherited: no
Percentages: relative to the flex container’s inner main size
Computed value: specified keyword or a computed <length-percentage> value
Syntax: content | <'width'>

css-flexbox-2 definition

The measurements

11 examples, 10 of them matching Chrome, the rest first. Each is one declaration on a small page, drawn by Chrome and by our engine. Drag the handle to wipe between them.

flex-basis:stretch✕parsed, no effect

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

1,120 pixels differ from Chrome, the largest by 153 of 255 on one channel.

Differing pixels: 1,120
Max channel delta: 153

the example page

flex-basis:content✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

flex-basis:min-content✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

flex-basis:max-content✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

flex-basis:fit-content✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

flex-basis:20px✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

flex-basis:50%✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

flex-basis:4px✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

flex-basis:40%✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

flex-basis:calc(20px + 4px)✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

flex-basis:calc(40% + 20px)✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

Which values were measured

“Supported” on one example means “supported at the value we tried”. The property’s declared grammar has 9 branches; 7 of them carry a measurement. The publishing ceiling is 12 examples per property — a branch past it is left out by our choice, not by accident.

Value	Measured
content	✓pixel-exact
20px	✓pixel-exact
50%	✓pixel-exact
min-content	✓pixel-exact
max-content	✓pixel-exact
stretch	✕parsed, no effect
fit-content	✓pixel-exact
contain	not measured
auto	not measured

Tests in the suite that name this property

Secondary evidence: 21 Web Platform Tests carry a spec anchor pointing at this property. Only 1,254 tests in the whole corpus carry such an anchor, so an empty list here means nothing at all.

✓css/css-flexbox/auto-height-with-flex.html ✓css/css-flexbox/flex-basis-001.html ✓css/css-flexbox/flex-basis-002.html ✓css/css-flexbox/flex-basis-003.html ✓css/css-flexbox/flex-basis-004.html ✓css/css-flexbox/flex-basis-005.html ✓css/css-flexbox/flex-basis-006.html ✓css/css-flexbox/flex-basis-007.html ✓css/css-flexbox/flex-basis-008.html ✓css/css-flexbox/flex-basis-010.html ✓css/css-flexbox/flex-basis-011.html ✓css/css-flexbox/flexbox_flex-basis-shrink.html

+ 9 more

Measured against Chrome 148.0.7778.96 on 2026-10-11, with up to 40 candidate values tried per property. All properties · How the measurement works