flex中没有高度的溢出自动

Question

我有一些复杂的 flex 布局。

默认布局

* {
  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>

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

许多<p> 将位于skyblue 空间中。

所以它会像这样溢出。

我想让它溢出时滚动。

* {
  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>

条件

我不想声明 height 的 skyblue 空间。

身体的高度应该是100vh，但在这个代码中是400px。

Answer 1

将flex: 1 0 0; 添加到.column>.body，您将有skyblue 空间滚动溢出。

* {
  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: 1 0 0; /* Change from flex-grow:1  to flex: 1 0 0 */
  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>

Answer 2

尝试使用max-height。

.column>.body {
    max-height: 450px;
    overflow-y: auto;
    flex-grow: 1;
    background: skyblue;
}