# Flutter: “A RenderFlex overflowed by … pixels on the right” (or bottom)
> Flutter shows yellow and black stripes and A RenderFlex overflowed by N pixels. Why a Row or Column overflows, and the fix with Expanded, Flexible or scrolling.
Canonical: https://app369.com/fix/flutter-renderflex-overflowed/
Last updated: 2026-11-07
Yellow and black stripes appear on the screen and the console says A RenderFlex overflowed by some number of pixels. A Row or Column has children that want more space than it has. It often shows up only on smaller phones, with larger text settings, or when the keyboard opens.
**Short answer**
Constrain the child that is too big. In a Row, wrap the long text or the inner Column in Expanded or Flexible so it takes the remaining width and wraps. In a Column that runs off the bottom, wrap the content in a SingleChildScrollView, or give the growing child Expanded. Then test with the largest text size and on a small screen.
## **Why the Row or Column overflows, and the fix**
1. 01 ### **A child in a Row or Column has no size limit**
> “The error often occurs when a Column or Row has a child widget that isn't constrained in its size.” [**Flutter, Common Flutter errors**](https://docs.flutter.dev/testing/common-errors) A Row does not limit the width of its children. A long Text, or a Column holding one, tries to be as wide as all its characters and pushes past the edge. The error names the overflowing widget and the file and line in your code.
2. 02 ### **Wrap the child in Expanded or Flexible**
> “One way to do it is to wrap the Column in an Expanded widget” [**Flutter, Common Flutter errors**](https://docs.flutter.dev/testing/common-errors) Expanded makes the child take the space left in the Row, so the text wraps instead of overflowing. Flexible does the same but lets the child be smaller. Expanded is Flexible with a flex factor of 1.```
Row(
children: [
const Icon(Icons.message),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [Text(title), Text(longDescription)],
),
),
],
)
```
3. 03 ### **Overflow at the bottom: the screen is too short** A Column with a form or a long card list overflows at the bottom on small phones, or when the keyboard opens and takes half the screen. Wrap the content in SingleChildScrollView so it can scroll, or use a ListView. Use Expanded on the part that should grow, not on every child.```
Scaffold(
body: SingleChildScrollView(
child: Column(children: formFields),
),
)
```
4. 04 ### **It looked fine on your phone**
> “When it happens, yellow and black stripes appear, indicating the area of overflow in the app UI.” [**Flutter, Common Flutter errors**](https://docs.flutter.dev/testing/common-errors) Overflow depends on screen size and the user’s text size, so it slips through testing on one device. Run the app on a small simulator and with the largest accessibility text size before release. The stripes appear only in debug builds, so a release build gives no visual warning for the overflow.
Checked against the vendor’s docs on November 7, 2026: [Flutter docs: Common Flutter errors (RenderFlex overflow)](https://docs.flutter.dev/testing/common-errors).
## **Rather hand it over?**
Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.
- [from $450**App Fix Ticket**One reproducible bug in an existing mobile or web app, diagnosed and fixed.**See scope and start**](https://app369.com/fixed-price/flutter-firebase-bug-fix/)
- [from $450**AI-Built App Rescue**A Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.****No issues worth fixing, no charge.**** If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.**See scope and start**](https://app369.com/fixed-price/ai-app-rescue/)
Related: [**Flutter “RenderBox was not laid out”**](https://app369.com/fix/flutter-renderbox-was-not-laid-out/) · [**Flutter “setState() called during build”**](https://app369.com/fix/flutter-setstate-called-during-build/) · [**Flutter MissingPluginException**](https://app369.com/fix/flutter-missingpluginexception/) · [**Flutter requires a newer Kotlin Gradle plugin**](https://app369.com/fix/flutter-kotlin-gradle-plugin-version/)
Questions
## **More on this error**
**Can I just hide the yellow and black stripes? **+
The stripes are a debug warning. Hiding them does not fix the layout, and release builds show no warning at all, so the content that does not fit can end up out of view. Fix the constraint instead.
**Should I wrap every child in Expanded? **+
No. Use it on the child that should take the remaining space, such as the text next to an icon. Wrapping everything splits the space evenly and can cause other layout errors.
**Can you fix it for me? **+
If one bug is the whole problem, the App Fix Ticket covers it: a written diagnosis first, then the fix. If the app has more going on, the Launch Check is a written check of the whole app. Each issue found is rated critical, high, medium or low, with where it is and how it was confirmed. No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.
A different error?
## **Describe it and get a written quote**
Send the error and what you were doing. You get a written scope, a fixed price and a timeline; Simon replies by email, usually within one business day.
[**Describe your problem **→](https://app369.com/contact/) [**All fixes**](https://app369.com/fix/)