Flexbox Playground

The spec column re-runs the CSS flex sizing algorithm on this page: flex base sizes (numeric basis, or the content size when basis is auto), free space split by grow, and negative space removed in proportion to shrink times basis. It is deliberately simpler than the browser in three ways: it does not know min-content sizes, so min-width:auto never rescues an item here; it floors shrunken items at zero without the spec's freezing loop; and column direction gets no spec numbers, because there is no container height to size against. The measured column is your browser via getBoundingClientRect, so sub-pixel rounding shows up as small deltas. When the two columns disagree for reasons beyond those, trust the browser and treat the spec column as the arithmetic.