Прокручиваемый изогнутый контент внутри прокручиваемого изогнутого содержимого

Question

Я пытался сделать этот вопрос как можно более общим. По сути, у меня есть вертикальный (столбец) гибкий макет внутри другого вертикального гибкого макета. Во внешнем макете я бы хотел, чтобы основная область (outer-main, в моем примере) заполняла оставшееся вертикальное пространство. Во внутренней структуре я также хотел бы, чтобы основная область (inner-main) заполняла оставшиеся вертикальные объекты.

Это работает правильно на внешнем макете, но во внутреннем макете я бы хотел, чтобы прокручивалась только основная область (inner-main), а не весь макет. Таким образом, inner-header всегда должен быть видимым, просто inner-main заполняет оставшееся пространство и является прокручиваемым.

Как я могу настроить свой CSS для достижения этой цели?

Фрагмент легче увидеть при запуске в полноэкранном режиме

.outer {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  padding: 5px;
}

.outer > div {
  border: 1px solid purple;
  flex: 0 0 auto;
}

.outer .outer-header {
  height: 10vh;
}

.outer .outer-main {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow: auto;
  padding: 5px;
}

.outer .outer-main > div + div,
.outer > div + div {
  margin-top: 5px;
}

.outer .outer-main > div {
  border: 1px solid green;
  flex: 0 0 auto;
}

.outer .outer-main .inner-main {
  flex: 0 1 auto;
}

<div class="outer">
  <div class="outer-header">Outer Header</div>
  <div class="outer-main">
    Outer Main
    <div class="inner-header">Inner Header</div>
    <div class="inner-main">
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
    </div>
  </div>
</div>

Answer 1

Хорошо, мне просто нужно было добавить overflow: auto к inner-main div, и это позволяет ему прокручиваться. Смотрите обновленный фрагмент ниже.

.outer {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  padding: 5px;
}

.outer > div {
  border: 1px solid purple;
  flex: 0 0 auto;
}

.outer .outer-header {
  height: 10vh;
}

.outer .outer-main {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow: auto;
  padding: 5px;
}

.outer .outer-main > div + div,
.outer > div + div {
  margin-top: 5px;
}

.outer .outer-main > div {
  border: 1px solid green;
  flex: 0 0 auto;
}

.outer .outer-main .inner-main {
  flex: 0 1 auto;
  overflow: auto;
}

<div class="outer">
  <div class="outer-header">Outer Header</div>
  <div class="outer-main">
    Outer Main
    <div class="inner-header">Inner Header</div>
    <div class="inner-main">
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
      <div>Inner Main Content</div>
    </div>
  </div>
</div>