Scrollbar is moving entire div - html

Question

I'm writing an HTML program that will create a chat window.
And I have 3 divs and in the bottom div I'll enter text and my HTML is as below.
<div class="chatbox" id="chatbox" style="margin: 0px;">
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.41.0.min.js"></script>
<div class="chatHeader">
<span class="chat-text" style="text-align: center;">Chat with Care!!</span>
<div id="close-chat" onclick="closeChatbox()">×</div>
<div id="minim-chat" onclick="minimChatbox()" style="display: block;">
<span class="minim-button">−</span>
</div>
<div id="maxi-chat" onclick="loadChatbox()" style="display: none;">
<span class="maxi-button">+</span>
</div>
</div>
<div class="chatBody" style="margin-top:13%">
<ul id="ulid">
<li class="lexResponse">Hi I am CARE..Your Personal Assistant</li>
<li class="me">Hi THere</li><li class="lexResponse"><div>Sorry, can you please repeat that?</div></li><li class="me">H there</li><li class="lexResponse"><div>Sorry, can you please repeat that?</div></li><li class="me">start the fl;ow</li><li class="lexResponse"><div>what is your budget? is it very high, high, low or medium?</div></li><li class="me">Start the flow</li><li class="lexResponse"><div>what is your budget? is it very high, high, low or medium?</div></li></ul>
</div>
<form class="chat-form" onsubmit="return pushChat()">
<div class="backgroundColor">
<input type="text" id="textinput">
</div>
</form>
</div>
Here when I added my CSS, I need a scrollbar for the center div(I'm getting this), but when I scroll the bar, the bottom div is also moved.
please let me know on how can I fix the bottom div to bottom and have scroll bar only to the center div.
Here is a working fiddle.
https://jsfiddle.net/g87mfLxa/1/
Thanks

Answer 1

Add the following styles to the chatBody class.
`.chatBody {
overflow: auto;
height: 70%;
margin-bottom: 50px;
}`
remove
overflow: auto
from chatBox.
Hope this is what you meant.
The updated fiddle

Answer 2

You are almost close. You just need to change the position to position:sticky in your CSS in class chat-form. To give it better look you may wish to remove horizontal scroll bar. Your CSS got two changes in the CSS classes below . See this updated jsfiddle.
.chatbox {
position: fixed;
width: 80%;
height: 85%;
bottom: 0.5%;
right: 1%;
margin: 0 0 -1500px;
background: white;
overflow-y:auto;
overflow-x:hidden;
}
.chat-form {
position: sticky;
/* bottom: 0px; */
bottom: 0;
/* margin-top: 4%; */
display: flex;
align-items: flex-start;
width: 100%;
}
Let me know If It was helpful.