Добавить прокрутку только к содержанию, а не к заголовку

Question

У меня в принципе довольно стандартная компоновка с двумя столбцами:

<div id="app">
  <div class="left">
    <div class="first">
      <div class="header">Dynamic Items</div>
      <div class="scrollable">
        <div id="items">
          <div class="item">Predefined</div>
        </div>      
      </div>
    </div>
    <div class="second">
      <div class="header">Fixed Items</div>
      <div class="items">
        <div class="item">Fixed Item 1</div>
        <div class="item">Fixed Item 2</div>
        <div class="item">Fixed Item 3</div>
      </div>
    </div>
  </div>
  <div class="right">
    <button id="btn">Add 5 Items</button>
  </div>
</div>

Это работает почти так, как ожидалось: когда я добавляю элемент в контейнер «Динамические элементы> элементы», он растягивается, как и ожидалось, пока левый столбец не займет 100% высоты страницы. Добавление дополнительных элементов делает «прокручиваемый» контейнер .first.

.left {
  display: flex;
  flex-direction: column;
}

.first {
  overflow: auto;
}

Но я пытаюсь добиться, чтобы прокручивалась только .scrollable часть, сохраняя .header контейнера .first на месте.

Посоветуйте, пожалуйста, как добиться такого поведения.

Пожалуйста, посмотрите на этот пример скрипки: https://jsfiddle.net/Alexey_U/scf4mn86/39/

Answer 1

Сделать .first гибкий контейнер. Присвойте функции прокрутки значение .scrollable.

Внесите следующие изменения в свой код:

.first {
  /* overflow: auto; */
  display: flex;
  flex-direction: column;
  min-height: 0; /* for Edge and FF; see https://stackoverflow.com/q/36247140/3597276 */
}

.scrollable {
  overflow: auto;
}

исправленная демоверсия скрипки

Answer 2

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

Таким образом, дайте контейнеру высоту у Дайте заголовку высоту х И прокручиваем высоту calc (у-х)

Таким образом, с фиксированной высотой и свойством прокрутки переполнения, прокрутка будет прокручивать только оставляя заголовок на своем месте