Set max width for an element inside a row

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),
        )
      ],
    ),
  ),

Solution 1: Yeasin Sheikh

Container's constraints apply to the child,

Additional constraints to apply to the child.

While there is no child in your Container, you are having this behavior. Add a child on Container.

You can check more about UI constraints.

Update:

I prefer using LayoutBuilder to handle responsiveness.

 Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Row(
          children: [
            Container(
              constraints: BoxConstraints(
                maxWidth:
                    constraints.maxWidth >= 500 ? 500 : constraints.maxWidth,
              ),
              child: Wrap(
                children: [
                  ...List.generate(
                    55,
                    (index) => Text("conta sner"),
                  )
                ],
              ),
              color: Colors.red,
            ),
            Expanded(child: Container(color: Colors.green))
          ],
        ),
      ),
    );

Solution 2: Tasnuva Tavasum oshin

home: Scaffold(
body:Container(
width: double.infinity,
child: Row(
children: [
Container(constraints: const BoxConstraints(maxWidth: 500), color: Colors.red),
Expanded(child: Container(color: Colors.green))
],
),)
),

Solution 3: Saddan

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),
      )
    ],
  ),
);