CSS: прокрутка с постоянным заголовком внутри области с постоянным заголовком

Question

У меня есть макет с заголовком вверху. Заголовок никогда не двигается. Содержимое ниже прокручивается

<div style="display: flex; height: 100%; flex-direction: column">
  <div>
     Header never moves 
  </div>
  <div style="flex: 1; overflow: auto">
     Internal scroll area 
  </div>
</div>

Мне нужно поместить еще один * заголовок в область прокрутки, который, как и предыдущий, не перемещается.

<div style="display: flex; height: 100%; flex-direction: column">
  <div>
     Header never moves 
  </div>
  <div style="flex: 1; overflow: auto">
      <div style="display: flex; height: 100%; flex-direction: column">
         <div>
            Header never moves 
         </div>
         <div style="flex: 1; overflow: auto">
            Internal scroll area 
         </div>
      </div>
  </div>
</div>

Высота 100% во второй / внутренней области прокрутки делает полосу прокрутки go за пределами нижней части страницы во внутренней области прокрутки. Мне нужна внутренняя область прокрутки, чтобы * прокручивать только в пределах заданной высоты. Любые идеи? Я не могу найти ответ на этот вопрос.

Answer 1

Вы должны избавиться от overflow: auto элемента в строке 5 и использовать вместо него position: sticky.

Элемент overflow: auto элемента div должен выполнить работу для «Внутренней области прокрутки». .

Детская площадка: https://stackblitz.com/edit/typescript-playground-r747zw

Пример:

html

<div style="display: flex; height: 100%; flex-direction: column">
  <div id="header-1">
     Header never moves 
  </div>
  <div class="inner-wp" style="flex: 1;">
      <div style="display: flex; height: 100%; flex-direction: column">
         <div id="header-2">
            Header never moves 
         </div>
         <div style="flex: 1; overflow: auto">
            Internal scroll area 
         </div>
      </div>
  </div>
</div>

css

#header-1 {
  position: sticky;
  top: 0; /* mandatory */
}

#header-2 {
  position: sticky;
  top: 18px; /* mandatory. you need to adjust this depending on #header-1 and your case */
}