Flutter Column children exceed constrained box parent - flutter

Question

The following flutter example results in the green box and text actually exceeding the constraints of the parent container. Why does this happen in this case? Basically the column is exceeding its incoming parent constrained height of 400, and seems to be using the top parent container height when making decisions on where to layout its children. Also the black border is not visible?
I have also tried using sizedbox, constrainedbox and the result is the same.
This is purely to understand the reason why this happens in more detail.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.red,
child: Container(
height: 400,
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
constraints: BoxConstraints(maxHeight: 400),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 50,
width: 50,
child: Container(
color: Colors.green,
)
),
Text("Test")
]
)
)
);
}
}

Answer 1

I know it's over a year since this issue was raised, but I recently ran into a very similar issue, and (by experimenting) I found a solution
My problem can be better demonstrated by having the Column contain multiple Text entries that are multiple lines long, and the overflow marker appears, but the text continues on the screen
The actual solution seems quite simple but not immediately obvious... wrap the Text entries in a Flexible!
SizedBox(
height: 131,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text1,
),
Flexible(
child: Text(
text2,
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 10,
),
),
),
],
),
);