ElevatedColumn doesn't support overflow when wrapped in a SingleChildScrollView

[liam-hp]

As described, while a normal Column allows for overflow even when wrapped in a SingleChildScrollView, ElevatedColumn cuts off the overflow. Interestingly, it allows for the overflow without the scroll view.

Minimal example:

Scaffold(
  body: Container(
    color: Colors.white,
    height: globals.screenH,
    width: globals.screenW,
    alignment: Alignment.center,
    child: Container(
      height: 400,
      width: 200,
      color: Colors.grey,
      alignment: Alignment.topCenter,
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column( // Replacing this Column with ElevatedColumn stops overflow
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              color: Colors.black,
              height: 50,
              width: 200,
              alignment: Alignment.center,
              child: OverflowBox(
                maxHeight: 200,
                maxWidth: 200,
                child: Container(
                  color: Colors.red.withOpacity(.5),
                  height: 150,
                  width: 150,
                )
              )
            ),
          ]
        ),
      ),
    )
  )
);

[lukas-pierce]

@liam-hp Just add clipBehavior: Clip.none to SingleChildScrollView

Full working example:

import 'package:flutter/material.dart';
import 'package:elevated_flex/elevated_flex.dart';

// hardcoded sizes for iPhone 15 Pro Max
final class globals {
  static const double screenH = 932;
  static const double screenW = 430;
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        height: globals.screenH,
        width: globals.screenW,
        alignment: Alignment.center,
        child: Container(
          height: 400,
          width: 200,
          color: Colors.grey,
          alignment: Alignment.topCenter,
          child: SingleChildScrollView(
            clipBehavior: Clip.none, // <---------------------------- add this
            scrollDirection: Axis.vertical,
            child: ElevatedColumn( // Replacing this Column with ElevatedColumn stops overflow
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  color: Colors.black,
                  height: 50,
                  width: 200,
                  alignment: Alignment.center,
                  child: OverflowBox(
                    maxHeight: 200,
                    maxWidth: 200,
                    child: Container(
                      color: Colors.red.withOpacity(.5),
                      height: 150,
                      width: 150,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}