css - 深嵌结构复杂的div

Question

我正在尝试按照下图所示构建我的 div:

并且无法找到最适合实现此目的的相应 css 语法。我知道 display:flex 和 overflow-y:auto，但这种技术不适用于多层嵌入式 div。

我是 css 的新手，很可能已经有人问过这样的问题，但我想不出合适的关键词来研究它。

https://jsfiddle.net/5p4mrmm6/

Answer 1

这可能是一般结构，但由您决定宽度和尺寸。我给了一个类 .grow 来让一个元素占据所有可用空间 - 在你认为合适的时候重用它。

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