The accepted answer is not ideal for the use of flex properties, because it can all be done without the need for min-height or max-height
I’ve cleaned up the example fiddle and removed non-essential css styles to show which flex properties are being used here.
In order to get evenly spaced top/bottom divs, you need to either specify the proper value for flex-basis, or let flex work itself out. Assuming that the parent’s display is set to flex with a column orientation, the combined flex style can get us there easily:
.half-containers {
flex: 1;
}
see more on flex styling and the flex-basis property