Это решает и мою проблему. Поменял его в моем существующем css и он работает как шарм.

аюсь сделать дизайн Flexbox. Я не эксперт HTML / CSS. :(

У меня есть дизайн flexbox с фиксированным верхним и нижним колонтитулами и содержимым, которое занимает остальную часть доступного пространства страницы.

Когда я помещаю данные в область содержимого, которая длиннее доступного пространства, содержимое прокручивается. Но я хочу достичь другого.

Я хотел бы иметь несколько div (ниже друг друга) в области содержимого, и каждый div должен быть таким же высоким, как и область содержимого (даже если содержимое маленькое), поэтому у меня есть вид подкачки внутри области содержимого.

Пару дней я много пробовал и много читал, но не могу заставить его работать. Как сделать так, чтобы div внутри прокручиваемой области содержимого занимал все пространство (высоту)?

Ответы на вопрос(2)

что вы хотите, чтобы несколько элементов в разделе содержимого, которые в основном занимают всю страницу по размеру, но вы можете прокрутить.

Давайте назовем эти элементы в разделе контента «слайд».

Самый простой способ добиться этого - установить минимальные размеры этих элементов, например:

.content .slide {
  min-width:100vw;
  min-height:100vh;
}

Это гарантирует, что даже если содержимое слайда не займет все пространство, оно останется в полном размере.

 ScubaInstructor07 дек. 2017 г., 14:44
Это решает и мою проблему. Поменял его в моем существующем css и он работает как шарм.
Решение Вопроса

html, body {
  margin: 0;
  height: 100%; /* can also use viewport units (height: 100vh) */
}

#container {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
  height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}

main {
  flex: 1; /* takes the remaining height of the "container" div */
  overflow: auto; /* to scroll just the "main" div */
}

section {
  height: 100%; /* takes the visible area of the "main" div */
  overflow: auto; /* recommended */
  border-bottom: 1px solid;
  background: lightgreen;
}

header {background: #f88}
section:last-child {border: none}
footer {background: lightblue}
<div id="container">
  <header>top</header>
  <main>
    <section>1st</section>
    <section>2nd</section>
    <section>3rd<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
    </section>
    <section>4th</section>
    <section>5th</section>
  </main>
  <footer>bottom</footer>
</div>

Ваш ответ на вопрос