Is it possible to mix rows and columns with flexbox?

Question

In other words, is it possible to achieve this?

Note: This is the best I could get:

Answer 1

You can do it with nested flexbox, and you don't need to wrap at all.

* {
  box-sizing: border-box;
  border: 1px solid;
}
html,
body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container > div {
  background: #ececec;
  flex: 1;
}
.container > div:nth-of-type(2) {
  display: flex;
}
.container > div:nth-of-type(2) > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.container > div:nth-of-type(2) > div > div {
  flex: 1;
}

  
Div 1
  

    

      
Div 2.1 A
      
Div 2.1 B
    
    
Div 2.2
  
  
Div 3