Flutter column is not expending and causing overflow

Question

I think the Column or GridView has fixed height and adding items to Column causes the overflow. How can I fix this problem?

The relevant error-causing widget was: 
  Column myApp/lib/pages/bottomNavigation/profile.page.dart:439:22
The overflowing RenderFlex has an orientation of Axis.vertical.
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.

Code:

class _ShopState extends State<_Shop> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GridView.count( // error throwed from here 
          crossAxisCount: 2,
          padding: EdgeInsets.all(8),
          crossAxisSpacing: 8,
          mainAxisSpacing: 4,
          children: List.generate(12, (index) {
            return Container(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Image.network(
                    'https://via.placeholder.com/150x105',
                    width: double.infinity,
                    height: 150,
                    fit: BoxFit.fill,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Text(
                      'Hair Brush',
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                  Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[Text('\$90'), Text('asd')],
                  )
                ],
              ),
            );
          })),
    );
  }
}

Answer 1

A Column widget by default takes the maximum vertical space and since you provided max mainAxisAlignment, the children will be filled at maximum space available. Instead wrap the first widget inside Column with Flexible that takes the space as applicable to its child, so that rest of the children will be adjusted in remaining space, removing the overflow error. Working code below:

return Scaffold(
      body: Container(
        child: GridView.count( // error throwed from here
            crossAxisCount: 2,
            padding: EdgeInsets.all(8),
            crossAxisSpacing: 8,
            mainAxisSpacing: 4,
            children: List.generate(12, (index) {
              return Container(
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Flexible(
                      child: Image.network(
                        'https://via.placeholder.com/150x105',
                        width: double.infinity,
                        height: 150,
                        fit: BoxFit.fill,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 8),
                      child: Text(
                        'Hair Brush',
                        style: TextStyle(fontSize: 18),
                      ),
                    ),
                    Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[Text('\$90'), Text('asd')],
                    )
                  ],
                ),
              );
            })),
      )
    );

Hope this answers your question.

Answer 2

Wrap the container of List.generate with a Expanded widget