Flutter使用CustomScrollView时出现RenderFlex Overflow溢出错误怎么解决？

问题根因 #

• 配置冲突：你在SliverFillRemaining中设置了hasScrollBody: false，该配置会强制子组件高度匹配视口剩余高度，不会触发CustomScrollView的滚动逻辑，内容超出高度阈值就会直接溢出。同时最外层Column同时配置了mainAxisSize: MainAxisSize.min和子Expanded组件，二者逻辑完全冲突：Expanded要求父Column占满全部可用主轴高度，MainAxisSize.min要求Column收缩到内容高度，导致高度计算逻辑异常。
• 内层无滚动能力：嵌套在Expanded内部的多个子Column未配置滚动能力，在小屏设备、软键盘弹出的场景下，内容高度超过Expanded分配的高度阈值时就会触发溢出。

修复方案 #

调整步骤 #

1. 删除最外层Column的mainAxisSize: MainAxisSize.min配置，适配Expanded的高度要求
2. 直接将外层CustomScrollView替换为SingleChildScrollView，更适配登录页内容不足时撑满、内容超限时滚动的场景
3. 给内层高度不固定的Column（尤其是表单区域）包裹SingleChildScrollView，超出高度时自动滚动

修复后参考代码 #

Scaffold(
  backgroundColor: Colors.transparent,
  body: SingleChildScrollView(
    reverse: true,
    // 用ConstrainedBox保证内容不足时撑满屏幕高度
    child: ConstrainedBox(
      constraints: BoxConstraints(
        minHeight: MediaQuery.of(context).size.height,
      ),
      child: IntrinsicHeight(
        child: Column(
          children: [
            Expanded(
              flex: 3,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: const [
                  Text(
                    'Welcome to\nMonumental habits.',
                    style: kTitle,
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 30,),
                ],
              ),
            ),
            Expanded(
              flex: 5,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        LargeIconButton(
                          buttonName: 'Continue with Google',
                          icon: 'assets/images/auth/google_icon.png',
                          onPressed: () {},
                        ),
                        SizedBox(height: 10,),
                        LargeIconButton(
                          buttonName: 'Continue with Facebook',
                          icon: 'assets/images/auth/facebook_icon.png',
                          onPressed: () {},
                        ),
                        SizedBox(height: 30,)
                      ],
                    ),
                  ),
                  Expanded(
                    child: Container(
                      decoration: const BoxDecoration(color: Colors.white),
                      // 表单区域包裹SingleChildScrollView，超出自动滚动
                      child: SingleChildScrollView(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Padding(
                              padding: const EdgeInsets.symmetric(vertical: 14),
                              child: Text('Login with email', style: kBodyText3),
                            ),
                            Divider(height: 3, color: kPrimaryColor.withOpacity(0.7)),
                            SizedBox(height: 10,),
                            Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 14,),
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  MyTextFormField(
                                    hint: 'Email',
                                    icon: Icons.email_outlined,
                                    inputType: TextInputType.emailAddress,
                                    inputAction: TextInputAction.next,
                                    fillColor: kScaffoldBackground,
                                    focus: _focusNodes[0],
                                    vlidator: emailValidator,
                                  ),
                                  MyPasswordField(
                                    fillColor: kScaffoldBackground,
                                    focus: _focusNodes[1],
                                    validator: passwordValidator,
                                  ),
                                  MyTextButton(
                                    buttonName: 'Login',
                                    onPressed: () {},
                                    bgColor: kPrimaryColor
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Antony David