Flexbox: Layout with rowspan

Question

My HTML is similar to the following example

<div id="wrapper">
 <div id="a">a</div>
 <div id="b">b</div>
 <div id="c">c</div>
 <div id="d">d</div>
</div>

On desktop I'd like the divs to display next to each other which is of course trivial.

On mobile I'd like have table-like layout with similar to the following

b, c and d have flexible height so a would have to adjust to that.

Is that possible to do without wrapping b,c and d in a separate div?

Answer 1

Yes, you can do this entirely with flexbox...of course you're going to need to decide on a width for the first div at smaller viewport sizes but I assume that you have that in mind already ready for the required media query.

#wrapper {
  height: 100vh;
  width: 90vw;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 10px auto;
}
#wrapper div {
  flex: 1 0 auto;
  border: 1px solid white;
  background: lightblue;
  text-align: center;
}
#a {
  flex-grow: 1;
  height: 100%;
  flex-basis: 50%;
}
@media screen and (min-width: 640px) {
  #a {
    height: auto;
    flex-grow: none;
    flex-basis: auto;
  }
}

<div id="wrapper">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
</div>

Codepen Demo