CSS webkit flex layout in both horizontal and vertical directions

Question

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>
</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: http://jsbin.com/usisic/3/edit

Thanks

score 2 · Accepted Answer · answered Feb 19 '13 at 17:46

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

.a {
  height:200px;
  background: red;
}

.b {
  background: blue;
  height:50%;
}

.c {
  background: green;
  height:50%;
}

score 0 · Answer 2 · answered Feb 18 '13 at 17:27

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>nested flex</title>
    </head>
    <body>
      <div class="wrap">
        <div class="a">red</div>
        <div class="nested">
        <div class="b">blue</div>
        <div class="c">green</div>
      </div>
    </div>
</body>
</html>
.wrap { display: -webkit-flex; height: 50px; -webkit-flex-direction: row; -webkit-flex-flow: row; -webkit-flex-wrap: wrap;}
.a { -webkit-flex:1; max-width: 100px;background: red;}
.b { background: blue; height:40%; padding-bottom:5px;}
.c { background: green; height:40%; padding-bottom:5px;}
.nested {-webkit-flex:1; max-width: 50px;}

Nice - but is it possible to get the layout I'm after without modifying my original HTML or adding any divs? I was thinking a column flow layout, where the columns wrapped to create the layout i'm after. The reason I cannot modify the HTML is because I'm creating a complex layout that adapts due to user settings, hence needing to change the layout purely with CSS. — romiem, Feb 19 '13 at 13:56

Reggie Pinkham · Answer 3 · 2017-06-28T01:36:46.407

Flexbox solution

I had trouble getting the other answers to work as expected. This solution does not require set heights – responding to variable amounts of content.

html, body {height: 100%; }

.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
}

.a {
  height: 100%;
  max-width: 100px;
}

.b, .c {
  width: 100%;
  flex-grow: 1;
}

.a { background: red; }
.b { background: blue; }
.c { background: green; }

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

CSS webkit flex layout in both horizontal and vertical directions

3 Answers3

Flexbox solution

Linked