More complex Flex layout

Question

Only trying to achieve this layout in chrome.
The names in layout are its classes, so you have a bit less confusing orientation in there
This is the layout I would like to use:

(The "nothing changed" part is the one with class "info")

|------------------------------|
|                              |
|           header             |
|------------------------------|
|      |                       |
|      |        info           |
|      |-----------------------|
|      |      |                |
|      |      |                |
| nav  |      |                |
|      | menu |     main       |
|      |      |                |
|      |      |                |
|      |      |                |
|------|------|----------------|

Link to existing example with a bit messed layout. I am trying to
http://codepen.io/Akxe/pen/chIzx

Answer 1

Your code is too large to understand, so I simply started from scratch and made a simple template

Here is my pen: http://codepen.io/chaitan94/pen/vFgek

I made all the widths using percentages, so its a basic fluid template. Hope this helps!