Нелипкий div внутри липкого div ⇐ Html

[Anonymous]

На моем веб-сайте есть компонент, который выглядит примерно так:

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

body {
color: #fff;
font-family: arial;
font-weight: bold;
font-size: 40px;
}

.main-container {
max-width: 600px;
margin: 0 auto;
border: solid 10px green;
padding: 10px;
margin-top: 40px;
}

.main-container * {
padding: 10px;
background: #aaa;
border: dashed 5px #000;
}

.main-container *+* {
margin-top: 20px;
}

.main-header {
height: 50px;
background: #aaa;
border-color: red;
}

.main-content {
min-height: 1000px;
}

.main-header {
position: -webkit-sticky;
position: sticky;
top: 0;
}

.header-divider {
position: sticky;
top: 80px;
width: 80%;
place-self: center;
border-radius: 100px;
background: white;
}

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

HEADER
INFO

MAIN CONTENT

Информационный контейнер исчезает при прокрутке вниз, контейнер заголовка остается сверху, а разделитель оказывается прямо под заголовком.
Однако проблема в том, что предполагается, что заголовок имеет постоянную высоту, поскольку разделитель указывает верхний атрибут.
Могу ли я каким-то образом добиться того же результата, даже если контейнер заголовка имеет динамический высота?

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