"flex-basis: 0 overrides width and collapses a fixed column in Yoga"

A flex column styled with width: Npx; flex-grow: 0 to fix its size collapses to near-zero width. Text renders one character per line. A flex-grow: 1 sibling eats the freed width.

In the engine's Yoga layout, an explicit flex-basis takes precedence over width for a flex item's main-axis size. If a base SCSS rule sets flex-basis: 0 and a derived rule only overrides width without also overriding flex-basis, Yoga sees a definite main size of 0 — min-content is not honored, and the column collapses.

The failure is invisible headlessly: dotnet build never compiles SCSS — only the live editor shows it.

Set flex-basis: Npx (plus width: Npx belt-and-suspenders) to give Yoga a definite main size:

.fixed-column {
  width: 200px;
  flex-basis: 200px;  // must override inherited flex-basis: 0
  flex-grow: 0;
  flex-shrink: 0;
}

A flex column starved by a wrong 50/50 split wraps its own inner rows (clock/pill rows breaking to two lines) — same off-frame-sizing symptom, same class of fix.

Yoga's resolution order for the main axis is: flex-basis (if definite) > width/height > content size. By setting flex-basis to the desired size, Yoga uses it directly without falling through to the width property. The inherited flex-basis: 0 is overridden at the point of use.