How to fix flex container to get equals columns?

You might want go build a container with equal size elements.

In this cas you will probably do something like:

/* Our flex container */
.container { display: flex; }

/* Items */
.container .item { flex: 1 1 0; }

But in some case you will find that this is not working and this might be because of remaining size constraints on the flex container elements.

See the Pen [css] Flexbox with equal size items by Sylvain Gamel (@sylvaingml) on CodePen.

You can find a basic example for this in the following codepen.