автоматическое переполнение без высоты в гибком

Question

У меня сложный макет с гибкостью.

Макет по умолчанию

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