这可能是一般结构，但是由你来决定宽度和尺寸。我给了一个 .grow 类，以使一个元素占用所有可用空间 - 重复使用你认为合适。

This would probably be the general structure, though it's up to you to figure out the widths and dimensions. I gave a class of .grow to make an element take up all of the available space - reuse that as you see fit.

.flex {
  display: flex;
}
.col {
  flex-direction: column;
}
.grow {
  flex-grow: 1;
}
.parent {
  max-width: 960px;
  width: 90%;
  margin: auto;
}

.a {
  background: pink;
}
.b {
  background: orange;
}
.c {
  background: red;
}
.d {
  background: brown;
}
.e {
  background: yellow;
}
.f {
  background: turquoise;
}

<div class="flex parent">
  <div class="a">a</div>
  <div class="flex col grow">
    <div class="flex">
      <div class="b">b</div>
      <div class="flex col grow">
        <div class="flex">
          <div class="c">c</div>
          <div class="grow d">d</div>
        </div>
        <div class="e">e</div>
      </div>
    </div>
    <div class="grow f">
      f
    </div>
  </div>
</div>