Freespace

How this works

Flexbox has a reputation for being unpredictable, and it isn't. It runs a fixed algorithm, written down in the CSS Flexible Box Layout spec, and the reason it feels arbitrary is that the algorithm is invisible: you change flex-grow, boxes move, and you are left guessing why.

So I implemented that algorithm. The panel on the left drives a flexbox layout engine I wrote from scratch in plain JavaScript, with no libraries: it works out each item's flex base size, breaks items into lines, runs the spec's loop for resolving flexible lengths (including freezing items that hit a min or max and redistributing what's left), sizes and stretches the lines on the cross axis, then applies justify-content, align-content and align-self. Every intermediate number it computes is printed under the stage as it happens.

The second box on the stage is your browser laying out the very same items with real display:flex. After every change, both results are measured and compared box by box, and the badge at the top shows the largest difference in pixels. If my engine were wrong, you would see it immediately, so the "how it works" story here is checkable rather than something you have to take my word for. The fuzz button pushes that further: it generates hundreds of random containers and items, lays each one out both ways, and reports how many matched.

flex-grow does not divide the container

This is the single most common misreading. flex-grow: 2 on one item and flex-grow: 1 on another does not produce a 2:1 split. Each item first gets its flex base size, then whatever space is left over is divided in the ratio 2:1 and added on top. If the two items start at 200px each in a 500px container, the leftover is 100px, so they end up at 266.7px and 233.3px, nowhere near 2:1. Load the "flex-grow shares the leftover" preset and drag the container width to watch the ratio drift.

Why your item refuses to shrink

The other classic: a flex item that overflows its container and ignores flex-shrink. Flex items get min-width: auto by default, and for a flex item that resolves to an automatic minimum size, roughly the size of its content, rather than to zero. Shrinking stops dead at that floor and the rest overflows. Setting min-width: 0 (or min-height: 0 in a column) releases it. The "min-width:auto overflow trap" preset shows this happening, and you can watch the trace freeze the items at their minimum.

What this engine does not do

It covers the parts of flexbox you use daily: both directions and their reverses, wrapping and wrap-reverse, gaps, grow, shrink, basis, min and max on both axes, order, margins, justify-content, align-items, align-content and align-self. It deliberately leaves out baseline alignment, auto margins, percentage lengths, aspect ratios and writing modes, and each item carries an explicit content size instead of real text, so intrinsic text measurement never enters into it. Those exclusions are why the comparison against your browser is a fair one rather than a rigged one.