Why do I get "A RenderFlex overflowed by 42 pixels on the right" in Flutter?

Why it happens

A Row or Column gives each child unlimited space along its main axis and then asks the children how big they want to be. If the sum of their intrinsic sizes is larger than the parent, Flutter paints the overflow stripes (in debug only). Text never wraps by itself inside a Row because it was told it may be as wide as it likes.

Fix 1: let the long child share the remaining space

Row(
  children: [
    const Icon(Icons.local_shipping),
    const SizedBox(width: 8),
    Expanded(
      child: Text(
        title,
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
      ),
    ),
    const SizedBox(width: 8),
    FilledButton(onPressed: onTap, child: const Text('Track')),
  ],
)

Expanded forces the Text to take only the leftover width, so it wraps or truncates.

Fix 2: use Flexible when the child may be smaller

Flexible (default fit: FlexFit.loose) lets the child be smaller than the available space, whereas Expanded forces it to fill.

Fix 3: allow wrapping of many items

For chips or tags use Wrap(spacing: 8, runSpacing: 8, children: [...]) instead of a Row.

Fix 4: scroll if the content really is wider

Wrap the Row in SingleChildScrollView(scrollDirection: Axis.horizontal).

Pitfalls

• Putting Expanded inside a Row that is itself inside another unbounded Row gives a different error ("RenderFlex children have non-zero flex but incoming width constraints are unbounded").
• The same error appears vertically when the keyboard opens: wrap the form in a SingleChildScrollView or use a ListView.
• Test with a large system font size and a 320 dp wide device, since that is where overflows show up first.