Как уменьшить родного брата при прокрутке родного брата ниже? ⇐ CSS

[Anonymous]

Вот чего я хотел бы достичь:


Я не вижу простого решения CSS.
Все, что я придумал, это изменить: «верхнее» положение верхняя панель (с позицией: относительная), для нижней части я изменяю значение поля (на отрицательное значение) и увеличиваю максимальную высоту.
Вот весь код:

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

.chat {
width: 300px;
}

.header {
background: #f3886d;
}

.top {
background: #ffcdd3;
}

.text-xl {
font-size: 48px;
}

.text-center {
text-align: center;
}

.bottom {
background: #f36e7e;
overflow: auto;
max-height: 200px;
}

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

STICKY

TOP BAR


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ante
ex. Fusce laoreet nunc eget cursus tempor. Sed pharetra faucibus varius.
Duis sodales tempor nisi. Praesent placerat, dui vehicula vestibulum
vestibulum, orci nulla gravida ex, quis suscipit magna ligula non mauris.
Integer pharetra sed enim quis posuere. Nunc mollis facilisis felis, quis
porttitor enim tempor a. Etiam vulputate euismod lectus, sed sodales dui
rhoncus in. Suspendisse sed ex imperdiet, semper purus facilisis, aliquam
nisi. Aenean a aliquam lacus, ut posuere ante. Sed venenatis in orci non
porttitor. Aliquam eu orci quis tortor tincidunt vulputate. Integer
euismod non mi ut cursus. Etiam nec tincidunt neque. Quisque placerat leo
sit amet nisi faucibus malesuada. Suspendisse vel urna quam. Sed quis arcu
elit. Pellentesque mollis ante quis dui finibus placerat. Fusce pharetra
rhoncus felis. Mauris tellus sapien, lacinia vitae vehicula sed, elementum
nec neque. Aenean pretium sodales sapien tristique ultricies. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed mollis volutpat mauris vitae aliquam. Etiam vitae urna eget lectus
viverra rutrum vitae id ex. Etiam rhoncus pharetra magna, imperdiet
vestibulum augue aliquam in. Morbi nunc ante, rutrum et luctus nec,
pharetra vitae nunc. Maecenas et condimentum diam. Quisque lacus erat,
imperdiet eget congue elementum, accumsan vel mauris. Proin mattis
tincidunt lobortis. Curabitur non varius orci. Vivamus consectetur, neque
ac scelerisque facilisis, velit magna malesuada massa, quis lacinia justo
erat id urna. Pellentesque neque sapien, facilisis ut nunc a, semper
iaculis erat. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Cras pellentesque tempor eros, vitae
ultricies sem scelerisque et. Curabitur bibendum condimentum ante, in
porttitor lacus dignissim sit amet. Sed hendrerit vulputate elit interdum
dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Vivamus lorem lectus, aliquet sit amet lorem sed, dapibus tempor nulla.
Donec suscipit vitae odio tempus maximus. Nunc et arcu id odio consequat
laoreet ut a ante. In eu elit sed nisi commodo fermentum maximus vel
ipsum. Vivamus faucibus rutrum egestas. Quisque sed magna sed nulla
condimentum lobortis a id justo. Ut dignissim dignissim eleifend. Donec
luctus metus eu dolor bibendum, ut ullamcorper justo placerat. Phasellus
in eros ligula. Curabitur rhoncus luctus nulla, in luctus libero euismod
vel. Suspendisse tempor mi ac tincidunt vulputate. Integer et leo id massa
aliquet mollis. Integer vel pharetra tellus. Cras non libero nec mi
malesuada luctus in sit amet libero. Etiam sit amet libero purus. Vivamus
sagittis, est sit amet facilisis tincidunt, enim ante vulputate nibh, a
congue diam nibh sit amet libero. Suspendisse accumsan odio nec
sollicitudin elementum. Nullam nec pharetra risus. Donec vitae elementum
enim. Nunc faucibus, elit vitae scelerisque viverra, felis urna luctus
ipsum, eu eleifend est ex quis diam. Etiam rhoncus sit amet felis ac
blandit. Integer sodales turpis at augue accumsan accumsan.  Quisque mollis
felis ut ligula finibus, at faucibus mi vestibulum. Donec ultricies
ultrices mi vitae suscipit. Vivamus malesuada nec ante in sollicitudin.



STICKY
class="top"
style="overflow: hidden; position: relative; z-index: -1; top: -24px"
>
TOP BAR


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ante
ex. Fusce laoreet nunc eget cursus tempor. Sed pharetra faucibus varius.
Duis sodales tempor nisi. Praesent placerat, dui vehicula vestibulum
vestibulum, orci nulla gravida ex, quis suscipit magna ligula non mauris.
Integer pharetra sed enim quis posuere. Nunc mollis facilisis felis, quis
porttitor enim tempor a. Etiam vulputate euismod lectus, sed sodales dui
rhoncus in. Suspendisse sed ex imperdiet, semper purus facilisis, aliquam
nisi. Aenean a aliquam lacus, ut posuere ante. Sed venenatis in orci non
porttitor. Aliquam eu orci quis tortor tincidunt vulputate. Integer
euismod non mi ut cursus. Etiam nec tincidunt neque. Quisque placerat leo
sit amet nisi faucibus malesuada. Suspendisse vel urna quam. Sed quis arcu
elit. Pellentesque mollis ante quis dui finibus placerat. Fusce pharetra
rhoncus felis. Mauris tellus sapien, lacinia vitae vehicula sed, elementum
nec neque. Aenean pretium sodales sapien tristique ultricies. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed mollis volutpat mauris vitae aliquam. Etiam vitae urna eget lectus
viverra rutrum vitae id ex. Etiam rhoncus pharetra magna, imperdiet
vestibulum augue aliquam in. Morbi nunc ante, rutrum et luctus nec,
pharetra vitae nunc. Maecenas et condimentum diam. Quisque lacus erat,
imperdiet eget congue elementum, accumsan vel mauris. Proin mattis
tincidunt lobortis. Curabitur non varius orci. Vivamus consectetur, neque
ac scelerisque facilisis, velit magna malesuada massa, quis lacinia justo
erat id urna. Pellentesque neque sapien, facilisis ut nunc a, semper
iaculis erat. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Cras pellentesque tempor eros, vitae
ultricies sem scelerisque et. Curabitur bibendum condimentum ante, in
porttitor lacus dignissim sit amet. Sed hendrerit vulputate elit interdum
dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Vivamus lorem lectus, aliquet sit amet lorem sed, dapibus tempor nulla.
Donec suscipit vitae odio tempus maximus. Nunc et arcu id odio consequat
laoreet ut a ante. In eu elit sed nisi commodo fermentum maximus vel
ipsum. Vivamus faucibus rutrum egestas. Quisque sed magna sed nulla
condimentum lobortis a id justo. Ut dignissim dignissim eleifend. Donec
luctus metus eu dolor bibendum, ut ullamcorper justo placerat. Phasellus
in eros ligula. Curabitur rhoncus luctus nulla, in luctus libero euismod
vel. Suspendisse tempor mi ac tincidunt vulputate. Integer et leo id massa
aliquet mollis. Integer vel pharetra tellus. Cras non libero nec mi
malesuada luctus in sit amet libero. Etiam sit amet libero purus. Vivamus
sagittis, est sit amet facilisis tincidunt, enim ante vulputate nibh, a
congue diam nibh sit amet libero. Suspendisse accumsan odio nec
sollicitudin elementum. Nullam nec pharetra risus. Donec vitae elementum
enim. Nunc faucibus, elit vitae scelerisque viverra, felis urna luctus
ipsum, eu eleifend est ex quis diam. Etiam rhoncus sit amet felis ac
blandit. Integer sodales turpis at augue accumsan accumsan. Quisque mollis
felis ut ligula finibus, at faucibus mi vestibulum. Donec ultricies
ultrices mi vitae suscipit. Vivamus malesuada nec ante in sollicitudin.

Знаете ли вы какое-нибудь лучшее решение?

Подробнее здесь: https://stackoverflow.com/questions/782 ... ling-below