flutter A RenderFlex overflowed by 113 pixels on the right on gridview

Question

I don't understand why the entire block does not fit the width of the container, since I have set all child containers to the width of the container

I get an error A RenderFlex overflowed by 113 pixels on the right.

GridView.count(
                    shrinkWrap: true,
                    crossAxisCount: 3,
                    physics: const ClampingScrollPhysics(),
                    scrollDirection: Axis.horizontal,
                    crossAxisSpacing: 3,
                    mainAxisSpacing: 10,
                    children: [
                      for (var i = 0; i < genresColorsList.length; i++)
                        Container(
                          height: 75,
                          width: 250,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Row(
                            children: [
                              Container(
                                width: 8,
                                height: 50,
                                color: genresColorsList[i]['color']
                                    .toString()
                                    .toColor(),
                              ),
                              Container(
                                width: 170,
                                height: 50,
                                alignment: Alignment.centerLeft,
                                decoration: BoxDecoration(color: Colors.brown),
                                child: Padding(
                                  padding: const EdgeInsets.only(left: 10),
                                  child: Text(
                                    genresColorsList[i]['genre'],
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                    ]),

Answer 1

Just remove the width of the parent container and wrap it with an expanded widget.

 GridView.count(
      shrinkWrap: true,
      crossAxisCount: 3,
      physics: const ClampingScrollPhysics(),
      scrollDirection: Axis.horizontal,
      crossAxisSpacing: 3,
      mainAxisSpacing: 10,
      children: [
        for (var i = 0; i < genresColorsList.length; i++)
          Expanded(
            child: Container(
              height: 75,
              
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      height: 50,
                      color:
                          genresColorsList[i]['color'].toString().toColor(),
                    ),
                  ),
                  Expanded(flex: 3,
                    child: Container(
                      height: 50,
                      alignment: Alignment.centerLeft,
                      decoration: BoxDecoration(color: Colors.brown),
                      child: Padding(
                        padding: const EdgeInsets.only(left: 10),
                        child: Text(
                          genresColorsList[i]['genre'],
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
      ]),