Positioning elements with flexbox?

Question

css

Good afternoon.
There is the following need:
https://jsfiddle.net/v8n2mu6s/27/
1. Initially, all three blocks should be in one row.
2. Block 1 and 2 have a given width. (use available flexbox properties if possible)
3. Box 3 should stretch to the remaining available width.
4. When narrowing the browser window, blocks 1 and 2 can be reduced to some minimum width, and after that block 2 should fit under block 1, and block 3, respectively, should stretch to the freed width from block 2.
The implementation is of interest exclusively on flex, this is possible ?
Thanks in advance.

Answer 1

Good afternoon.
You need media queries here, without media queries, except for js.
Why?
It's simple, so that block 3 takes up free space in this case, you need to swap them with block 2 through order.

Answer 2

Play with flex-grow, flex-shink and flex-basis
properties