Дочерний div с absolute всегда внизу прокрученного родительского div, на чистом css
Столкнулся с непоняткой. Есть родительский div
с фиксированной высотой и автоматической вертикальной прокруткой "по требованию". Внутри него есть первый div
потомок с position: absolute
и высотой большей, нежели высота родителя (вследствие чего появляется вертикальный скролл) и второй div
потомок, также с position: absolute
и произвольной высотой. Мне необходимо, чтобы второй потомок всегда был внизу родителя, даже если первый потомок гораздо больше по высоте. А получается, что второй потомок при его bottom: 0
находится внизу видимой части родителя и плевать ему, что у родителя есть скролл и низ этого парента гораздо ниже чем видимая часть. И еще момент: у первого потомка, который с большой высотой, эта высота не статичная, она формируется контентом, в примере она указана протсо для указания размеров, кто есть кто.
Код
.parent {
position: relative;
height: 400px;
background: red;
overflow: auto;
}
.child_big {
position: absolute;
background: yellow;
height: 2000px;
}
.child_small {
position: absolute;
bottom: 0;
width: 100%;
background: blue;
}
<div class="parent">
<div class="child_big">Контент первого потомка</div>
<div class="child_small">Контент второго потомка</div>
</div>