Set max width for an element inside a row

Question

I'm trying to make the first element inside the row to be responsive, but with max width of 500. The result is the first element size is always 500.

home: Scaffold(
    body: Row(
      children: [
        Container(
          constraints: const BoxConstraints(maxWidth: 500),
          child: const Text(
              "container container container container container container container container container container container container "),
          color: Colors.red,
        ),
        SizedBox(
          width: 600,
          child: Container(color: Colors.green),
        )
      ],
    ),
  ),

Answer 1

Just notice flex value first row Item flex value is 6 which means it will take 60% of available space, and second one has 4 which means second one will take 40% of available space

home: Scaffold(
  body: Row(
    children: [
      Expanded(
        flex: 6,
        child: Container(

          child: const Text(
              "container container container container container container container container container container container container "),
          color: Colors.red,
        ),
      ),
      Expanded(
        flex : 4,
        child: Container(color: Colors.green),
      )
    ],
  ),
);