Как заставить элемент flexbox заполнить оставшееся пространство и прокрутить?

Question

Я пытаюсь сделать вертикальный прокручиваемый div в оставшемся пространстве некоторых элементов. Ни один из них не имеет фиксированной высоты.

Все, что я получил, это элемент flexbox, который подстраивается под его содержимое, но мне действительно нужно, чтобы этот элемент заполнил пустое пространство, а его содержимое просто прокручивало там.

Код на скрипке

HTML

<div class="wrapper-1">
  <div>some stuff</div>
  <div>some other stuff</div>
</div>
<div class="wrapper-2">
  <div>more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more stuff</div>
</div>
<div class="wrapper-3">
  <div id="header">
      <div>My</div>
      <div>Header than can grow</div>
  </div>
  <div id="content">
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
  </div>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
}

.wrapper-1 {
  background: white;
}

.wrapper-2 {
  background: lime;
}

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

#header {
  background: #edc;
  flex: 1 1 40px;
}

#content {
    flex: 1 1 auto;
    background: yellow;
    overflow: auto;
}

#content div {
  min-height: 50px;
}

#content должно иметь высоту от #header до нижней части страницы.

Идеальным решением было бы использование только CSS, но альтернативное решение JS могло бы помочь, дело в том, что это должно работать даже при изменении размера окна браузера.

Answer 1

На самом деле гибкий нативно заполняет пустое пространство.Вам нужно установить высоту родительского контейнера, для этого есть 2 решения:

• Либо установите height: 100% в html, body и все промежуточные контейнеры, пока не достигнете .wrapper* 1006.*
• Или с более кратким методом: непосредственно установите min-height из .wrapper в 100vh (что означает 100% высоты области просмотра).Пример ниже

.wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#content {
  flex: 1;
}

.wrapper > div {
  border: 1px solid tomato;
}

<div class="wrapper">
  <div>
    <div>some stuff</div>
    <div>some other stuff</div>
  </div>
  <div>
    <div>My</div>
    <div>Header than can grow</div>
  </div>
  <div id="content">
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
  </div>
</div>