0

Looking to have a design (image attached), however I can only get this to run when height of main wrapper div is 100vh. Anyone got any ideas? I want this to run fluently underneath.

enter image description here

Code:

body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100vh;
}

div {
  height: 33vh;
}

.a {
  flex: 0 0 100%;
  background: red;
}

.b, .c {
  flex: 0 0 50%;
  background: green;
}

.d, .e, .f {
  flex: 0 0 33%;
  background: yellow;
  border-bottom: 2px solid white;
}

.c {
  background: blue;
}
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
leonheess
  • 16,068
  • 14
  • 77
  • 112
Brad
  • 459
  • 2
  • 9
  • No this then puts all divs in rows – Brad Apr 16 '19 at 12:15
  • is this your required layout (commented the changes inline): https://codepen.io/anon/pen/gyoPKg – kukkuz Apr 16 '19 at 12:28
  • @Brad It puts all `
    `s in rows because you set their height to 33vh. Is their height going to be defined by content ? If yes, it will work withtout the need for a height value. If they don't have content, an alternative solution to 33vh+ 100vh is to use `height: 100%` (see this [example](https://jsfiddle.net/cjake/mft20n7k/4/))
     – Jake Apr 16 '19 at 12:46
  • Hi Jake, yes however this is still having the issue that 6 divs show column, when the maximum should always be 3 – Brad Apr 16 '19 at 12:59

0 Answers0