ListView Builder vs SingleChildScrollView + Row combo

I want to make a responsive UI in my app. In my home page, I have ScrollView->Column->childrens structure.

When I want to use horizontal Listview.builder in my column, it throws me error because height is unbounded. I fix it with wrapping my listview builder with container and I give this container a height value. But I dont want to give this height hardcoded,

I want to make my container height to its own child's height. I searched it and found a solution like ScrollView->Row->list.generate instead of ListView.Builder. But is it okay to make it like this? Does it cause performance problems or is it a bad practice?

My list isn't big. It has max 20 elements

For example this throwing error:

@override   Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: SingleChildScrollView(
          child: Column(
        children: [
          ListView.builder(
            itemCount: 5,
            physics: NeverScrollableScrollPhysics(),
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return Container(
                width: 200,
                height: 200,
              );
            },
          )
        ],
      )),
    );   }

But this does not throw an error

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Column(
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: List.generate(
                5,
                (index) => Container(
                      width: 200,
                      height: 200,
                      color: Colors.red,
                    )),
          ),
        ),
      ],
    ));
  }