For the record, posting to keep it here.\
Investigating further the case with rectangles, I’ve discovered that there are 2 different CSS styles used: “flex-basis” and “flex-grow”.
The ones with “flex-basis” keep their dimensions, and if there is not enough space, scale down.
The ones with “flex-grow” tend to scale up (take the empty space), but if there is not enough space, they scale down before the flex-basis ones.
The logic of setting these classes is unclear though; seems that “flex-grow” is assigned to wider boxes, and “flex-basis” - to thinner ones. And it does not only depend on absolute box width in pixels, but also on size relation (thinnest to widest), number of components, empty space between them and if one of the components “touches” the screen border.
It would be great if someone could shed a light how it works. @Colin may be you could advise?