Widget TreeEasy20 XP3 min read
Why does Flutter throw 'RenderFlex overflowed' and how do you fix it?
TL;DR: RenderFlex overflow occurs when the total intrinsic size of children exceeds the available space in a Row or Column. Fix it with Flexible, Expanded, a scrollable, or by constraining child sizes.
Full Answer
A Row or Column gives children their desired size first. If the total exceeds available space, a yellow-and-black overflow stripe appears in debug mode.
Common Fixes
- ▸Wrap the overflowing child in Flexible or Expanded to allow it to shrink/fill
- ▸Wrap the Column/Row in a SingleChildScrollView to allow scrolling
- ▸Use Wrap instead of Row for content that should wrap to the next line
- ▸Set overflow: TextOverflow.ellipsis on Text widgets
- ▸Use FittedBox to scale content to fit
🎯
Expanded is Flexible(flex: 1, fit: FlexFit.tight). Flexible with FlexFit.loose allows the child to be smaller than its share of space; Expanded forces it to fill.
Code Examples
dartFixing overflow in a Row
Output
Without fix: yellow overflow stripe at runtime. With Expanded: text truncates with '...' cleanly.
Common Mistakes
- ✗Using Expanded outside of a Row/Column/Flex — throws a RenderFlex assertion
- ✗Nesting unbounded scroll views (Column inside SingleChildScrollView inside ListView)
Interview Tip
💡
Show you know the fix options AND their trade-offs: Expanded vs Flexible vs scrollable. This shows architectural thinking, not just googling.
#overflow#RenderFlex#Column#Row#Flexible#Expanded