Как сделать позицию: липкая работа внутри дочернего элемента CSS Grid с переполнением? ⇐ CSS

[Anonymous]

Я пытаюсь создать макет, в котором высота страницы фиксируется в области просмотра (100vh), области .sidebar и .content прокручиваются независимо, а .content-header внутри .content должен оставаться липким во время прокрутки .content-body.
Вот CSS, который я использую:

Код: Выделить всё

body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
}

.page-header {
flex: 0 0 auto;
padding: 1rem;
background: #333;
color: white;
}

.layout {
flex: 1 1 auto;
display: grid;
grid-template-columns: 250px 1fr;
max-height: 100%;
overflow: hidden; /* needed so main area does not scroll the whole page */
}

.sidebar {
overflow-y: auto;
padding: 1rem;
background: #f1f1f1;
}

.content {
overflow-y: auto; /* scroll only this area */
padding: 1rem;
}

/* Sticky header inside the scrollable content area */
.content-header {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: white;
border-bottom: 1px solid #ccc;
z-index: 1;
}

.content-body {
padding-top: 1rem;
}

Ожидаемое поведение:

• Высота всей страницы фиксируется в области просмотра (

  Код: Выделить всё

  100vh

  );
• Прокручиваться должны только .sidebar и .content;
• Внутри .content .content-header должен оставаться прикрепленным вверху, а .content-body прокручивается под ним.

Однако позиция: липкий не работает внутри макета сетки с переполнением: скрытым.
Почему это происходит и как я могу сохранить заголовок липким, позволяя при этом прокручивать содержимое?>

Подробнее здесь: https://stackoverflow.com/questions/798 ... h-overflow