Why does Column CrossAxisAlignment.stretch cause the Column to grow?

December 11, 2022

I have a layout like this:

Container(
  alignment: Alignment.center,
  color: Colors.blueGrey,
  child: Container(
    color: Colors.amber,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 150, // Dummy - actual width is unknown
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: 300, // Dummy - actual width is unknown
          height: 100,
          color: Colors.green,
        )
      ],
    ),
  ),
)

Which produces this layout:

Then I add crossAxisAlignment: CrossAxisAlignment.stretch, to the Column, expecting this:

However, what actually happens is this:

Why? How can I achieve my expected result?

>Solution :

stretchwill try to get as much space as possible. You can set the yellow Container width and use stretch but this is hard-coded. Also you use IntrinsicWidth over Column widget and it will use max child width , but it has some cost.

Container(
  alignment: Alignment.center,
  color: Colors.blueGrey,
  child: IntrinsicWidth(
    child: Container(
      color: Colors.amber,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 150, // Dummy - actual width is unknown
            height: 100,
            color: Colors.red,
          ),
          Container(
            width: 300, // Dummy - actual width is unknown
            height: 100,
            color: Colors.green,
          )
        ],
      ),
    ),
  ),
),