In Flutter how to remove widget overlap issue?

In my following code, I have a Container at the body of Scaffold. The child of this Container is a Column (later as a part of solving my issued, also tried replacing this with Stack). The first child of this Column I require to be is a Container as shown in red colour. For remaining of the children, I require them to be scrollable, so I placed them in SingleChildScrollView. For the purpose of asking this question, I've simplified my code to include only coloured Containers inside the child Column of SingleChildScrollView.

Problem: When I add enough Containers in the Column - the child of SingleChildScrollView, a bottom overflow error occurs.

What I tried: To solve this problem, I searched the web, and I found a help which said bottom overflow occurred because SingleChildScrollView was placed in a Column. So, I tried replacing the Column with Stack as suggested in the solution, but it did not work for me, as the contents of SingleChildScrollView was displayed on top of the red container which is not supposed to happen.

What I need: I require the red container as non-scrollable and following that a series of scrollable items as in my code sample below.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.all(5.0),
        // TRIED: replacing the immediately following Column by Stack.
        child: Column(
          children: [
            Container(
              color: Colors.red,
              width: double.infinity,
              height: 200.0,
            ),
            SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    color: Colors.green,
                    width: double.infinity,
                    height: 200.0,
                  ),
                  Container(
                    color: Colors.orange,
                    width: double.infinity,
                    height: 200.0,
                  ),
                  Container(
                    color: Colors.green,
                    width: double.infinity,
                    height: 200.0,
                  ),
                  Container(
                    color: Colors.orange,
                    width: double.infinity,
                    height: 200.0,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Wrap your SingleChildScrollView with an Expanded widget.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.all(5.0),
        // TRIED: replacing the immediately following Column by Stack.
        child: Column(
          children: [
            Container(
              color: Colors.red,
              width: double.infinity,
              height: 200.0,
            ),
            Expanded( // Added this
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Container(
                      color: Colors.green,
                      width: double.infinity,
                      height: 200.0,
                    ),
                    Container(
                      color: Colors.orange,
                      width: double.infinity,
                      height: 200.0,
                    ),
                    Container(
                      color: Colors.green,
                      width: double.infinity,
                      height: 200.0,
                    ),
                    Container(
                      color: Colors.orange,
                      width: double.infinity,
                      height: 200.0,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}