flutter reduce the height of container

I'm passing some json data to another widget which will show as a card. The problem is the container is automatically taking a large height.

This is what the page currently looks like. The black borders I provided is the desired height.

This is how I'm passing data:

      GridView.count(
        crossAxisCount: 1,
        physics: const ClampingScrollPhysics(),
        shrinkWrap: true,
        children: List.generate(
          widget.recipe!.recipeSteps!.length,
          (index) {
            return Container(
              constraints: BoxConstraints.tightForFinite(height: 10),
              child: StepsCard(
                recipeStep: widget.recipe!.recipeSteps![index].name,
              ),
            );
          },
        ),
      ),

And this is the code for StepsCard():

class StepsCard extends StatelessWidget {
  final String? recipeStep;

  StepsCard({required this.recipeStep});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 5, bottom: 5),
      child: Container(
          height: 20,
          decoration: BoxDecoration(
            // color: Color(0xfff8f8fa),
            color: Colors.red,
            borderRadius: BorderRadius.circular(15),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text("image"),
              Text(this.recipeStep!),
            ],
          )),
    );
  }
}

how can I create a container of the size I marked as black?

Update 1: I have tried providing height to both the containers(height:10) but that didn't work at any level

Update 2:

this is the code I've tried as per suggestion given by @7mada

      Container(
        height: 100,
        child: ListView.builder(
          itemCount: widget.recipe!.recipeSteps!.length,
          itemBuilder: (BuildContext context, int index) {
            return StepsCard(
                recipeStep: widget.recipe!.recipeSteps![index].name);
          },
        ),
      ),

It gives me a container of height 100 and makes the content inside it scrollable which is problematic as the StepsCard() is at the bottom of the column I dont want the height constraint.

Update 3:

  Widget _buildItems(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 40,
          ),
          appBar(context),
          SizedBox(
            height: 20,
          ),
          VideoCard(
            url: widget.recipe!.recipeVideoLink,
          ),
          RecipeIntroCard(
            recipeName: widget.recipe!.recipeName,
            category: widget.recipe!.category,
            time: widget.recipe!.time,
            recipeAuthor: widget.recipe!.recipeAuthor,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                "Ingredients",
                style: TextStyle(
                  color: Color(0xff18172b),
                  fontSize: 25,
                  fontFamily: "Poppins",
                  fontWeight: FontWeight.w400,
                ),
              ),
            ],
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            height: 80.0,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: widget.recipe!.ingredients!.length,
              itemBuilder: (BuildContext context, int index) {
                return IngredientCard(
                  name: widget.recipe!.ingredients![index].name,
                  amount: widget.recipe!.ingredients![index].amount,
                );
              },
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "Steps",
                  style: TextStyle(
                    color: Color(0xff18172b),
                    fontSize: 25,
                    fontFamily: "Poppins",
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: widget.recipe!.recipeSteps!.length,
              itemBuilder: (BuildContext context, int index) {
                return StepsCard(
                    recipeStep: widget.recipe!.recipeSteps![index].name);
              },
            ),
          ),
        ],
      ),
    );
  }