romiem romiem - 4 months ago 30
CSS Question

CSS webkit flex layout in both horizontal and vertical directions

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.

That said, I have markup as follows:

<div class="wrap">
<div class="a">red</div>
<div class="b">blue</div>
<div class="c">green</div>

And CSS as:

.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; }

The layout I am trying to achieve is:

|red |blue |
| |_______|
| |green |
| | |

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.

I have created a JSBin link with the code:


    .wrap { display: -webkit-flex; max-width: 200px; height:200px; -webkit-flex-flow: column wrap;}
.a .b .c {
    max-width: 100px;
  -webkit-flex: 1;

.a {
  background: red;

.b {
  background: blue;

.c {
  background: green;