Why don't my UI Toolkit flex children wrap to next line?

Default flex-wrap: nowrap. Set flex-wrap: wrap (or wrap-reverse) and ensure parent has flex-direction: row. Children flow to next row when the row fills.

Why are children clipped instead of overflow scroll?

overflow: hidden is implicit on flex containers. Set overflow: visible to show beyond, or overflow: scroll for scrollbars. flex-wrap is preferred for grid-like layouts.

For CSS Grid behavior, UI Toolkit doesn't have native grid. Approximate with flex-wrap, fixed child width, justify-content: flex-start. Grid-like layouts emerge.

Fix: UI Toolkit Flex Row Doesn't Wrap

Quick answer: flex-wrap: wrap in USS. Children flow to next row when first fills.

Inventory grid in UI Toolkit. Items just keep extending right and clip. Default flex-wrap is nowrap.

The Fix

/* USS */
.inventory-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}
.inventory-cell {
    width: 64px;
    height: 64px;
    margin: 4px;
}

Wrap is the trigger; cell width must be fixed (or have grow=0) so the layout knows when to break to next row.

Verifying

Resize the parent narrow: cells reflow to multiple rows. Resize wide: collapses to single row.

“flex-wrap wrap. Cells flow.”

Related Issues

For UXML binding, see binding. For Canvas Scaler, see Canvas Scaler.

Wrap on. Cells reflow.