Flutter RenderFlex Overflowed by Pixels: How to Fix It

August 28, 2026·4 min read·Beginner

A Row, Column, or other Flex-based widget renders content that doesn't fit within the space available to it, and Flutter shows a yellow-and-black striped overflow warning in debug mode.

Error

A RenderFlex overflowed by 42 pixels on the right.

androidioswebflutterwidgetsui

The Problem

A Row, Column, or other Flex-based widget renders content that doesn't fit within the space available to it, and Flutter shows a yellow-and-black striped overflow warning in debug mode.

Symptoms

•Yellow/black diagonal-striped overflow indicator appears in the UI
•Console prints 'A RenderFlex overflowed by X pixels on the [right/bottom]'
•Layout looks fine on one screen size but overflows on smaller ones

Why This Happens

•A Row's children collectively need more horizontal space than the Row has available
•A Column's children need more vertical space than is available
•Text with a long string and no wrapping/constraint applied
•A widget given a fixed width/height that doesn't shrink for smaller screens
•Missing Expanded/Flexible around a child that should share space instead of taking its natural size

Quick Fix

Wrap the specific child that's too large in Expanded (if it should grow to fill space) or Flexible (if it should shrink but not necessarily fill), or wrap the whole Row/Column in a SingleChildScrollView if the content is meant to scroll.

How to Fix It

1. Use Expanded for children that should share available space

Row( children: [ Expanded(child: Text('This text will wrap instead of overflowing')), Icon(Icons.star), ], ) Expanded forces its child to fill the remaining space, and works with Text to enable wrapping instead of overflowing.

2. Use Flexible when the child should shrink but not fill

Flexible( child: Text('...', overflow: TextOverflow.ellipsis), ) Unlike Expanded, Flexible lets its child be smaller than the available space — useful when you don't want to force-stretch a widget.

3. Wrap in SingleChildScrollView if the content is genuinely too big

If the content is meant to be fully visible but doesn't fit on smaller screens, wrap the Row or Column in a SingleChildScrollView with the appropriate scrollDirection.

4. Use Wrap instead of Row when items should flow to the next line

Wrap( children: [ /* chips, tags, buttons */ ], ) Wrap automatically moves children to a new line when they don't fit — often the correct fix for a Row of variable-width items.

Common Mistakes

×Wrapping in Expanded when Flexible was actually needed, causing over-stretching
×Fixing the overflow only on one screen size without testing smaller devices
×Using a fixed width/height instead of a relative constraint that adapts to screen size

How to Verify the Fix

1.Hot reload and confirm the yellow/black overflow stripes are gone
2.Resize the app window or test on a smaller device/emulator to confirm the layout holds at smaller widths
3.Check that text truncates or wraps as intended rather than being clipped unexpectedly

ShareX LinkedIn