title: CSS webkit flex layout in both horizontal and vertical directions
body: <p>Please note I only need to get this working in Chrome for an embedded device I am working on. Also please do not give any float, table, inline-block etc. based solutions - I am only interested in CSS flex answers.</p>
  
  <p>That said, I have markup as follows:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="a"&gt;red&lt;/div&gt;
      &lt;div class="b"&gt;blue&lt;/div&gt;
      &lt;div class="c"&gt;green&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS as:</p>
  
  <pre><code>.wrap { display: -webkit-flex; height: 100%; }
  .a { -webkit-flex: 1; max-width: 100px; background: red; }
  .b { -webkit-flex-flow: row; -webkit-flex-direction: row; -webkit-flex: 1; background: blue; }
  .c { -webkit-flex-flow: row; -webkit-flex-direction: row; -webkit-flex: 1; background: green; }
  </code></pre>
  
  <p>The layout I am trying to achieve is:</p>
  
  <pre><code>______________
  |red |blue   |
  |    |_______|
  |    |green  |
  |    |       |
  |____|_______|
  </code></pre>
  
  <p>The red box should have a height of 100% and a max-width of 100px; The height of the blue and green boxes combined should amount to 100%. Can anyone advise me how to achieve this with using -webkit-flex? You can see I have tried playing with flex flow and flex direction to no avail.</p>
  
  <p>I have created a JSBin link with the code: <a href="http://jsbin.com/usisic/3/edit" rel="nofollow">http://jsbin.com/usisic/3/edit</a></p>
  
  <p>Thanks</p>