Боковая панель с двумя флексбоксами сверху и снизу

Question

Я пытаюсь совместить две навигации внутри боковой панели - со 100% высотой области просмотра - с помощью flexbox.

• красное поле должно быть расположено в верхней части родительской боковой панели.
• синее поле внизу.

В случае, если красная навигация увеличивается, и расстояние между ними становится небольшим, боковая панель должна прокручиваться по оси Y.Я попробовал установить верхнее и нижнее поле для обоих без удачи.Кто-нибудь может мне помочь?

Спасибо!

html, body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.sidebar {
  height: 100vh;
  width: 300px;
  background: #ccc;
  padding: 10px;
  overflow-y: scroll;
}

.sidebar__top {
  background: red;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar__bottom {
  background: blue;
  height: 100px;
  margin-top: auto;
}

<aside class="sidebar">
  <nav class="sidebar__top"></nav>
  <nav class="sidebar__bottom"></nav>
</aside>

Вот моя скрипка: http://jsfiddle.net/1dw7h2sp/1/

Answer 1

Возможно, есть другие способы сделать это.Короче говоря, я сделал следующее:

1. Оберните ваши элементы родительским элементом, который может увеличиваться в размере (.sidebar__wrapper)
2. Установите min-height вместо heightпоэтому он может расти
3. Используйте flex-grow, если хотите, чтобы элемент заполнил оставшееся пространство.

html, body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.sidebar {
  height: 100vh;
  width: 300px;
  background: #ccc;
  overflow-y: scroll;
  
  margin: 0;
  padding: 0;
}

/* set up a wrapper that can grow in size */
.sidebar__wrapper {
  height: auto;
  min-height: 100vh;
  width: 100%;
  background: #808080;
  
  padding: 10px;
  margin: 0;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar__top {
  background: red;
  min-height: 200px;
  margin-bottom: 10px;
  
  /* this fills up the remaining space */
  flex-grow: 1;
}

.sidebar__bottom {
  background: blue;
  min-height: 100px;
}

<aside class="sidebar">
  <div class="sidebar__wrapper">
    <nav class="sidebar__top" contenteditable="true">
      <p>test</p>
    </nav>
    <nav class="sidebar__bottom"></nav>
  </div>
</aside>