我有一些复杂的布局与Flex。

默认布局

null

* {
  margin: 0
}

.root {
  width: 100%;
  height: 400px;
  background: gray;
  display: flex;
  flex-direction: column;
}

header {
  width: 100%;
  background: red;
  height: 80px;
}

main {
  width: 100%;
  background: blue;
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.column {
  display: flex;
  flex-direction: column;
}

.column>.head {
  flex: 0 0 40px;
  background: white;
}

.column>.body {
  overflow: auto;
  flex-grow: 1;
  background: skyblue;
}

.fixed {
  flex: 0 0 40px;
  background: black;
}

<div class="root">
  <header>

  </header>
  <main>
    <div class="container">
      <div class="column" style="flex-grow:6;background:yellow">
        <div class="container">
          <div class="column" style="flex-grow:6;background:pink">
            <div class="head">Head</div>
            <div class="body">
              <p>This space should be overflow auto</p>
            </div>
          </div>
          <div class="column" style="flex-grow:4;background:lime"></div>
        </div>
        <div class="fixed"></div>
      </div>
      <div class="column" style="flex-grow:4;background:orange">

      </div>
    </div>
  </main>

</div>

null

您可以在我的代码中看到SkyBlue空格。

许多

将在SkyBlue空间中。

所以它会像这样溢出来。

我想让它在溢出时滚动。

null

* {
  margin: 0
}

.root {
  width: 100%;
  height: 400px;
  background: gray;
  display: flex;
  flex-direction: column;
}

header {
  width: 100%;
  background: red;
  height: 80px;
}

main {
  width: 100%;
  background: blue;
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.column {
  display: flex;
  flex-direction: column;
}

.column>.head {
  flex: 0 0 40px;
  background: white;
}

.column>.body {
  overflow: auto;
  flex-grow: 1;
  background: skyblue;
}

.fixed {
  flex: 0 0 40px;
  background: black;
}

<div class="root">
  <header>

  </header>
  <main>
    <div class="container">
      <div class="column" style="flex-grow:6;background:yellow">
        <div class="container">
          <div class="column" style="flex-grow:6;background:pink">
            <div class="head">Head</div>
            <div class="body">
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
              <p>This space should be overflow auto</p>
            </div>
          </div>
          <div class="column" style="flex-grow:4;background:lime"></div>
        </div>
        <div class="fixed"></div>
      </div>
      <div class="column" style="flex-grow:4;background:orange">

      </div>
    </div>
  </main>

</div>

null

条件

我不想声明天蓝空间的高度。

身体高度应为100VH，而本代码中为400px。