How to use Expanded and a Container with a fixed height together in a column without overflow

Simply put, I want the following code to run without overflow.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('TestApp')),
    body: Column(
      children: [
        Container(
          height: 100,
          color: Colors.red,
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
          ),
        )
      ],
    ),
  );
}

Normally, there is no problem, but when the height of the screen is smaller than 100, overflow happens. Instead of overflowing, I want the height to be reduced.

I tried SingleChildScrollView and Wrap, and then Expanded was unavailable.And using ConstrainedBox to set MaxHeight to 100, still, there was an overflow.

You can take aid of MediaQuery class, if you want to avoid LayoutBuilder

@override
Widget build(BuildContext context) {
  final screenHeight = MediaQuery.of(context).size.height;
  final minHeight = 100;

  return Scaffold(
    body: Column(
      children: [
        Container(
          height: screenHeight < minHeight  ? screenHeight : 100,
          color: Colors.red,
        ),
        Expanded(
          flex: screenHeight < minHeight  ? 0 : 1,
          child: Container(
            color: Colors.blue,
          ),
        )
      ],
    ),
  );
}