CSS flex, how to display one item on first line and two on the next line

Question

This is a pretty simple question, I guess, but I can\'t get 3 items in the flex container to display in 2 rows, one in the first row and the other 2 in the second row. This

Answer 1

The answer given by Nico O is correct. However this doesn't get the desired result on Internet Explorer 10 to 11 and Firefox.

For IE, I found that changing

.flex > div
{
   flex: 1 0 50%;
}

to

.flex > div
{
   flex: 1 0 45%;
}

seems to do the trick. Don't ask me why, I haven't gone any further into this but it might have something to do with how IE renders the border-box or something.

In the case of Firefox I solved it by adding

display: inline-block;

to the items.