html – How do I place my div at the end of my scrollable div?

I have this HTML.

<div class="parent">
        <p>msg 1</p>
        <p>msg 2</p>
        <div class="proceed-msg">You want to proceed ? </div>
</div>

And CSS

.parent {
    height: 300px;
    overflow-y: scroll;
    border: 2px solid black;
    width: 200px;
    position: relative;
}

.proceed-msg {
    position: absolute;
    bottom: 0px;
}

So everything is working as expected. My forward message is under div. But if I have more messages, I need a scroll bar in the div, which is why I put a scroll-bar: y in my parent div.

But when I have a lot of messages, my proceed-msg The div is overlapping them.

<div class="parent">
        <p>msg 1</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        
        <div class="proceed-msg">You want to proceed ? </div>
    </div>

I always need to put my proceed-msg at the end – when I have a scroll bar in the div.

How can i do that

Add a Comment

Your email address will not be published. Required fields are marked *