How to execute the layout of such a block?

Question

css

Hello!
I started doing layout, I already broke my head, how to make layout like this layout:

The height of the columns is the same, but when narrowing / increasing the screen, the columns should adapt proportionally, while the distance between them remains the same.
I've already tried a bunch of options in flexbox, but I just can't think of the final one.

Answer 1

I made it with flex, so this thing will work in IE11 too. Although it's easier to do with grid. In general, this can be done at least on a float (but not necessary).
You can even arrange them differently, nothing will fall apart:

Answer 2

You can safely do it on grids, and forget about IE11)))

Answer 3

See flex-basis property
https://codepen.io/Stoutov/pen/mdbmYJm