Flexbox 3 divs, two columns, one with two rows

Question

I am trying to take

Three sequential divs and turn it into below. W

Answer 1

After thinking about this a little more, it is possible with flexbox. The container just has to have a defined height (%, px or vh) will work.

http://codeply.com/go/U1DCKAx85d

body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100vh;
}

.a {
  flex: 0 0 100%;
  background: red;
}

.b, .c {
  flex: 0 0 50%;
  background: green;
}

.c {
  background: blue;
}