Fix RenderFlex overflow in Row with long truncating text

What's really being asked

This question probes your understanding of Flutter's box constraint model inside flex layouts. A Row lays out its children horizontally and gives each child an unbounded maximum width constraint. A Text widget with overflow ellipsis needs a bounded width to know where to truncate. Without that bound, it greedily expands and triggers a RenderFlex overflow. The interviewer wants to see that you understand the difference between tight and loose constraints and know how to allocate space among children without hardcoding dimensions.

The full answer

First, explain that the Text must be wrapped in an Expanded or Flexible widget. Expanded forces the Text to fill the remaining space in the Row, which gives it a tight bounded width. Flexible with a fit of FlexFit.tight behaves similarly, while FlexFit.loose allows the text to be smaller. Either way, the critical point is that the Text now receives a finite maximum width from the flex layout algorithm. Second, state that the Text widget must have its overflow property set to TextOverflow.ellipsis and maxLines set to 1. Third, note that every other widget in the Row, such as an IconButton or CircleAvatar, should remain unwrapped so it keeps its intrinsic size and does not get stretched or squashed. Fourth, optionally mention that if there are multiple long texts, you can use multiple Expanded widgets with different flex factors to split the remaining space proportionally.

The mistakes people make

A major red flag is suggesting overflow ellipsis on the Text without any Expanded or Flexible wrapper. This fails because the Row still offers infinite width, so the Text never truncates and the overflow error persists. Another weak answer is wrapping the Text in a Container with a hardcoded width. While this prevents the overflow, it is brittle on different screen sizes and shows you default to pixel-perfect hacks rather than Flutter's constraint system. Suggesting a SingleChildScrollView or ListView is also off target because the requirement is truncation, not scrolling. Finally, wrapping non text widgets in Expanded unnecessarily is a mistake because it forces them to absorb space they do not need.

What usually comes next

The interviewer may ask what happens if you use Flexible instead of Expanded, which tests whether you know the difference between tight and loose fits. They might ask how to handle two long text widgets in the same Row, which leads to a discussion of flex factors. Another follow-up is what happens if the Row itself is inside an unbounded width widget like a ListView row, which introduces the concept of double unbounded constraints. They could also ask about using IntrinsicWidth or LayoutBuilder as alternatives.

A concrete example

Imagine a Row containing a CircleAvatar with a radius of 20, a Text displaying the user's full name, and an IconButton with a delete icon. The name is fifty characters long and overflows. You wrap the Text in Expanded and configure it as Text(name, overflow: TextOverflow.ellipsis, maxLines: 1). The CircleAvatar stays exactly forty logical pixels wide and the IconButton keeps its forty eight by forty eight hit target. The Text fills all remaining horizontal space and renders as Johnathan Alexand... instead of crashing the layout.