'How to force a row to take the height of one (or the smallest) of its children

I would like the row (containing the green and the red widgets) or the green widget to take the red widget's height, but without using a fixed size or a ratio anywhere.
The red widget must impose its size which depends on its content.
Is it possible (in a simple way) ?

image

   class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Expanded(
          child: Row(
            children: [
              Expanded(child: MyContainer(color: Colors.red, child: Column(children: generateTexts(10)))),
              Expanded(child: MyContainer(color: Colors.green, child: ListView(children: generateTexts(50))))
            ],
          ),
        ),
        Expanded(child: MyContainer(color: Colors.blue, child: Center(child: Text('REMAINING HEIGHT OF THE COLUMN')))),
        MyContainer(
          height: 50,
          color: Colors.yellow,
          child: Center(child: Text('FIXED HEIGHT')),
        )
      ],
    ));
  }
}

List<Widget> generateTexts(int count) {
  return List<Widget>.generate(count, (index) => Text('text $index'));
}

class MyContainer extends StatelessWidget {
  const MyContainer({this.child, this.color = Colors.transparent, this.width, this.height});

  final Widget? child;
  final Color color;
  final double? width;
  final double? height;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: child,
        decoration: BoxDecoration(
            color: color, border: Border.all(color: Colors.black), borderRadius: BorderRadius.circular(12)),
        width: width,
        height: height);
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source