Define css rules for dynamic column arrangement

I want to define a set of css rules to accomplish the following effect: I have a variable amount of child items of fixed size that need to be arrange in columns. If the items reach a certain height, restricted by the parent container (red), they should be arranged in two columns with the items balanced among them. This effect should work for an arbitrary amount of items and columns. At best the parent container should shrink to the size of the new arrangement (blue container). I'm looking for a plain css solution and tried it with flexblox but I think this isn't possible. I also tried it with grid but couldn't get it working yet. Thanks!