flexbox layout with two items on the left and one

Question

I am trying to achieve the following layout with flexbox.

┌─┬─────┐
│A│     │
├─┤  C  │ 
│B│     │
└─┴─────┘

Is it possible to do so without wrapping A and B into a wrapper?

Answer 1

Yes, it's possible. Take in account that in this example the main container has a fixed width and height.

#container{
  height: 200px;
  width: 300px;
  display: flex;
  flex-flow: column wrap;
}

#container, #A, #B, #C{
  box-sizing: border-box;
  border: 1px solid black;
}

#A{
  height: 50%;
  width: 100px;
}

#B{
  height: 50%;
  width: 100px;
}

#C{
  height: 100%;
  width: 200px;
}

<div id="container">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
</div>

Answer 2

unfortunately, there is no fixed height, so I ended up with doing things old way — via tables, like this

HTML:

<div id="container">
   <div id="A">A<br>AAA<br>BBB</div>
   <div id="B">B</div>
   <div id="C">C</div> 
</div>

CSS:

#container {
   width: 100%;
   outline: 1px solid black;
   display: table;
}

#A,#B,#C {
   outline: 1px solid crimson;
}

#A,#B {
  width: 100%;
}

#C {
   display: table-cell;
   vertical-align: middle;
   width: 50%;
}