Создайте гибкий макет полной высоты с элементами прокрутки

Question

Я хотел бы создать гибкий макет, который состоит из трех столбцов, каждый столбец полной высоты. Дело в том, что я хотел бы, чтобы три элемента div внутри них всегда растягивались одинаково сверху вниз, но последний элемент внешнего элемента div никогда не должен быть выше примерно 40% высоты, он должен прокручиваться, если он хочет растягиваться больше. Я не уверен, что я использую правильный подход, поэтому любая помощь будет приветствоваться .. вот скрипка: https://jsfiddle.net/2etg907f/2/

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
}

header {
  background-color: lightblue;
}

footer {
  background-color: lightblue;
  position: absolute;
  bottom: 0;
  width: 100%;
}

ul li {
  display: inline-block;
}

main {
  display: flex;
}

aside {
  background-color: lightgreen;
  width: 30%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.center-column {
  background-color: lightpink;
  width: 40%;
}

.first-part {
  overflow-y: scroll;
}

.second-part {
  overflow-y: scroll;
}

.third-part {
  max-height: 50%;
  overflow-y: scroll;
}

<div class="container">
  <header>
    <ul>
      <li>Some link</li>
      <li>Some link</li>
      <li>Some link</li>
      <li>Some link</li>
    </ul>
  </header>

  <main>
    <aside>
      <div class="first-part">
        Some text
      </div>

      <div class="second-part">
        Some text
      </div>

      <div class="third-part">
        Some text
      </div>
    </aside>

    <div class="center-column">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde pariatur possimus eligendi, voluptatem ab id molestiae dolorem obcaecati eaque omnis sit est facere enim tenetur doloremque! Obcaecati magnam consequatur velit.
    </div>

    <aside>
      right column
    </aside>
  </main>

  <footer>
    <ul>
      <li>Some link</li>
      <li>Some link</li>
      <li>Some link</li>
      <li>Some link</li>
    </ul>
  </footer>
</div>

Answer 1

JS Fiddle

Вы были на правильном пути, но height для детей не просто делает ничего в этом сценарии без высоты области просмотра, вы должны использовать высота области просмотра и вычтите из нее высоту верхнего и нижнего колонтитула. height: calc(100vh - 76px). И тогда для 3-х дочерних элементов их рост будет 33.33%.

Кроме того, использование scroll-y: auto принесет полосу прокрутки только в том случае, если содержимое больше высоты, как вы можете увидеть для 1-го div в демо.