Flutter 将小部件与同级列的底部对齐

我在屏幕截图中重新创建布局时遇到了问题，该布局遵循两条规则:

• 两个Column的高度由左侧的Column决定，因为内容(蓝色容器)在不同情况下可能会有所不同.
• 右边的Column应该和左边的柱子一样高，它的子项(黄色和红色容器)应该相应地与柱子的顶部和底部对齐.

这就是我现在拥有的

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Container(
        color: Colors.black12.withOpacity(0.1),
        padding: const EdgeInsets.all(24),
        child: Row(
          children: [
            Container(
              padding: const EdgeInsets.all(24),
              color: Colors.green,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    height: 500,
                    width: 200,
                    color: Colors.blue,
                  )
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(24),
              color: Colors.greenAccent,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    padding: const EdgeInsets.all(24),
                    height: 100,
                    width: 200,
                    color: Colors.yellow,
                  ),
                  Container(
                    padding: const EdgeInsets.all(24),
                    height: 100,
                    width: 200,
                    color: Colors.red,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

看起来是这样的:

现在谈谈我try 过的事情和问题:

1. 将"右柱"更改为"mainAxisSize: MainAxisSize.max,"将在决定高度的右侧列中显示结果.

2. 在黄色和红色容器之间添加Spacer将导致右侧列扩展到最大高度.

所以问题是:

• 跟随左列的高度，但不考虑所有可用高度
• 保持整个布局的高度动态(因此蓝色容器或左列没有硬编码的高度)
• 将右列上的容器和右列的顶部和底部对齐.

我觉得我错过了一些东西，或者需要一个我不知道的特殊小部件.也许可以提前使用Flexible？

任何 idea 或建议都是非常受欢迎的.

========================

基于@Ivo Beckers answer.的完整解决方案

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Container(
        color: Colors.black12.withOpacity(0.1),
        padding: const EdgeInsets.all(24),
        child: Center(
          child: IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  padding: const EdgeInsets.all(24),
                  color: Colors.green,
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        Container(
                          height: 500,
                          width: 200,
                          color: Colors.blue,
                        )
                      ],
                    ),
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(24),
                  color: Colors.greenAccent,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        padding: const EdgeInsets.all(24),
                        height: 200,
                        width: 200,
                        color: Colors.yellow,
                      ),
                      Container(
                        padding: const EdgeInsets.all(24),
                        height: 50,
                        width: 200,
                        color: Colors.red,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}