Commit #30940 breaks layout/grid when there is more than one row

[viicslen]

The commit #30940 doesn't really fix the issue when you have more than one row. You can add flex-wrap to the flex container to make the rows behave correctly but then it breaks tho option to set one of the rows as

flex: 1 1 auto;

to make one of the rows take all of the unused space
Example

You can overcome the issue stated in commit #30940 by just adding flex-column to the flex container without having to break more things down the line.
Example

[mdo]

This seems like a common problem and solution—if you're wrapping things in new flex containers, it's going to affect the children elements regardless. #30940 addressed an issue with width shrinking that previously didn't happen in Bootstrap 4, so we had to fix that regression.

This feels like a slightly different issue I think.

[viicslen]

Any pointers on how I should approach this in 4.5.1? My objective is to have one row with auto width and one more which takes the rest of the screen with overflow.

[mdo]

Putting nested rows like that makes me think you need to be using columns first. Rows have negative margins that interfere. Once you start rolling custom flex layouts with utilities, certain quirks and behaviors kick in. I think for here, you need to customize things further.

See https://codepen.io/emdeoh/pen/LYNYmPR?editors=1100 which removes the flex: 1 0 100% we added (and are removing in v4.5.2) and then adds some more utilities. I'd still recommend more columns, but I think this fixes your issue.