Repository navigation
RenderFlex overflow on Debugger screen #4917
Description
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 130 pixels on the right.
The relevant error-causing widget was:
Row
Row:file:///Users/kenzieschmoll/develop/devtools/packages/devtools_app/lib/src/screens/debugger/controls.dart:51:14
To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A50376%2FJfmk2APEhSQ%3D%2F.%2C&inspectorRef=inspector-0
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#f6a6c relayoutBoundary=up2 OVERFLOWING:
creator: Row ← SizedBox ← DebuggingControls ← Column ← SizedBox ← Flex ← LayoutBuilder ← Split ←
DebuggerScreenBody ← Expanded ← Column ← BannerMessages ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=521.3, h=32.0)
size: Size(521.3, 32.0)
direction: horizontal
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
textDirection: ltr
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
flutter: [ERROR]: A RenderFlex overflowed by 63 pixels on the right.
Activity
kenzieschmoll commentedon May 26, 2023
theprantadutta commentedon May 31, 2026
Is this still happening on current master? The debugger controls have changed a fair bit since 2023 (the pause/resume buttons are a
RoundedButtonGroupnow), so I'd want to reproduce the overflow first before proposing anything. If it still overflows and you're open to a fix, I'm happy to take it — let me know.theprantadutta commentedon Jul 3, 2026
Followed up on my question above with some data. The overflow still reproduces on current master, just at narrower widths than the 2022 screenshot — the small-mode work since then (dropping button labels below
DebuggingControls.minWidth) fixed the common case, but the controlsRowhas no strategy once the icon-only content itself doesn't fit.I pumped
DebuggingControlsthrough the repo's own test harness (testWidgetsWithWindowSize+FakeServiceConnectionManager+createMockDebuggerControllerWithDefaults) at descending window widths:So the threshold is ~630px, which is realistic for DevTools embedded in an IDE side panel.
If you're open to a fix, a few possible shapes — happy to implement whichever you prefer:
BreakOnExceptionsControldropdown collapses to an icon + menu (it's the widest remaining item).I'd also add a regression test pinning the no-overflow behavior at narrow widths.
Add before screenshot for flutter#4917
Add after screenshot for flutter#4917
Fix RenderFlex overflow in debugging controls at narrow widths (flutt…