Or something looks wrong: When OverflowBox is used inside a ScrollView and the view is of scrollable length the OverflowBox would not extend to screen width. Works fine when the view is not of scrollable length.

[ignicubeLaeeq]

Steps to reproduce

1. Create a simple flutter scaffold application.
2. Add Column to the body.
3. Wrap Column with SingleChildScrollView and Padding.
4. Add following overflow box to children of Column:

Center(
          child: Container(
            height: 200,
            width: 100,
            color: Colors.red.shade100,
            child: OverflowBox(
              maxWidth: MediaQuery.of(context).size.width,
              minHeight: 100,
              maxHeight: 150,
              child: Container(
                color: Colors.amber,
                height: 100,
              ),
            ),
          ),
        ),

This should render fine with amber box going to the edges of the screen.

6. Add Container to column with enough height that scroll is activated.

The yellow box no longer extends to the edge of the screen and is cropped by the padding.

Expected results

The overflow box should extend to the edge of the screen even if the view is scrollabale.

Actual results

OverflowBox not going to the edge of the screen horizontally when view is of enough height that it can scroll.

Code sample

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
      useMaterial3: true,
    ),
    debugShowCheckedModeBanner: false,
    home: const MyHomePage(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Home page'),
        centerTitle: true,
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(
                  child: Container(
                    height: 200,
                    width: 100,
                    color: Colors.red.shade100,
                    child: OverflowBox(
                      maxWidth: MediaQuery.of(context).size.width,
                      minHeight: 100,
                      maxHeight: 150,
                      child: Container(
                        color: Colors.amber,
                        height: 100,
                      ),
                    ),
                  ),
                ),
                // SizedBox(
                //   height: MediaQuery.of(context).size.height,
                // ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

variant1	variant2

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[Paste your output here]

[huycozy]

Hi @ignicubeLaeeq
The default clipBehavior in SingleChildScrollView is Clip.hardEdge which enables clipping. This will be fixed by using Clip.none instead.

I will close the issue as solved. If it doesn't fit your case, please write in comments and I will re-open this and take another look! Thank you!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.