I am facing a challenge with a container where the text can expand, but the absolute positioned child element needs to remain fixed at the bottom without overlapping the content above.
I have searched for solutions, but most of them rely on flexbox which is not compatible with internet explorer 9.
Here is my attempted solution:
.container{
max-width: 940px;
margin: 20px auto;
border: 1px solid red;
}
.table{
display: table;
width: 100%;
}
.table-cell{
display: table-cell;
position: relative;
height: 260px;
}
.absolute{
position: absolute;
bottom: 0;
}<div class="container">
<div class="table">
<div class="table-cell">
<div>
This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content.
This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content.
</div>
<div class="absolute">
asdasd
</div>
</div>
</div>
</div>