title: Flutter: How to fix "A RenderFlex overflowed by pixels " error?
body: <p>I am using <code>GridView</code> in my <code>Flutter</code> app to display images and their titles. Please check the below code.</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  import '../common_ui/search_bar.dart';
  
  class PurchaseProductsPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return PurchaseProductsUI();
    }
  }
  
  class PurchaseProductsUI extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      // TODO: implement createState
      return _PurchaseProductUIState();
    }
  }
  
  class _PurchaseProductUIState extends State&lt;PurchaseProductsUI&gt; {
    @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return ListView(
        children: &lt;Widget&gt;[
          Container(
            margin: EdgeInsets.all(20),
            child: SearchBar(),
          ),
          Container(
              margin: EdgeInsets.all(20),
              child: GridView.builder(
                  physics: ScrollPhysics(), // to disable GridView's scrolling
                  shrinkWrap: true,
                  itemCount: 20,
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2),
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                        padding: EdgeInsets.all(5), child: _buildImageBoxes());
                  })),
        ],
      );
    }
  
    Widget _buildImageBoxes() {
      return 
     Column(
        children: &lt;Widget&gt;[
          Container(
            child: Image.network("https://picsum.photos/200/300/?random"),
          ),
          Container(
            padding: EdgeInsets.all(10),
            child:  Text("Text"),        )
        ],
      );
  
    }
  }
  </code></pre>
  
  <p>I get the following error and UI when I run the above code</p>
  
  <pre><code>I/flutter ( 2743): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
  I/flutter ( 2743): The following message was thrown during layout:
  I/flutter ( 2743): A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): The overflowing RenderFlex has an orientation of Axis.vertical.
  I/flutter ( 2743): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
  I/flutter ( 2743): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
  I/flutter ( 2743): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
  I/flutter ( 2743): RenderFlex to fit within the available space instead of being sized to their natural size.
  I/flutter ( 2743): This is considered an error condition because it indicates that there is content that cannot be
  I/flutter ( 2743): seen. If the content is legitimately bigger than the available space, consider clipping it with a
  I/flutter ( 2743): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
  I/flutter ( 2743): like a ListView.
  I/flutter ( 2743): The specific RenderFlex in question is:
  I/flutter ( 2743):   RenderFlex#4a1bb OVERFLOWING
  I/flutter ( 2743):   creator: Column ← Padding ← Container ← RepaintBoundary-[&lt;14&gt;] ← IndexedSemantics ←
  I/flutter ( 2743):   NotificationListener&lt;KeepAliveNotification&gt; ← KeepAlive ← AutomaticKeepAlive ← SliverGrid ←
  I/flutter ( 2743):   MediaQuery ← SliverPadding ← ShrinkWrappingViewport ← ⋯
  I/flutter ( 2743):   parentData: offset=Offset(5.0, 5.0) (can use size)
  I/flutter ( 2743):   constraints: BoxConstraints(w=150.0, h=150.0)
  I/flutter ( 2743):   size: Size(150.0, 150.0)
  I/flutter ( 2743):   direction: vertical
  I/flutter ( 2743):   mainAxisAlignment: start
  I/flutter ( 2743):   mainAxisSize: max
  I/flutter ( 2743):   crossAxisAlignment: center
  I/flutter ( 2743):   verticalDirection: down
  I/flutter ( 2743): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
  I/flutter ( 2743): ════════════════════════════════════════════════════════════════════════════════════════════════════
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
  Reloaded 0 of 446 libraries in 1,179ms.
  </code></pre>
  
  <p>Below is the UI</p>
  
  <p><a href="https://i.stack.imgur.com/LaGJ2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LaGJ2.png" alt="enter image description here"></a></p>
  
  <p>How can I solve this?</p>