Flutter wrap does not as child of row

I have one Row with two children. The first is a Wrap and the second is another Row like so:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetweeen,
  children: [
    Wrap(<two children in here>),
    Row(<2 or 3 children in here>)
]

I expected, when the screen is smaller, that the children of Wrap would stack on top of each other on the left and the children of Row would stay in a Row on the right.

What actually happens is the child Row overflows to the right, and the Wrap children never stack on top of each other.

The goal is to avoid the overflow, but not to 'break' the child Row. The Wrap child is what I want to 'break' when size of the window is too small to have both Wrap and child Row in the parent Row.

PS - this is for web, not mobile. I don't think it matters.

Wrap you Wrap widget into Expanded:

Row(
  children: [
    Expanded(
      child: Wrap(
        spacing: 20,
        runSpacing: 20,
        children: [
          Container(width: 100, height: 50, color: Colors.green),
          Container(width: 100, height: 50, color: Colors.green),
          Container(width: 100, height: 50, color: Colors.green),
        ],
      ),
    ),
    Row(
      children: [
        Container(width: 100, height: 50, color: Colors.red),
        SizedBox(width: 30),
        Container(width: 100, height: 50, color: Colors.red),
      ],
    ),
  ],
)