fix a div and scroll another - html

Question

I'm writing HTML where there is a div and and inside it there are 2 more divs. and these 2 divs are arranged one below the another. the first div(top one) has an avatar in it, and in the second div there is some content. My requirement is to keep the first div as it is and the second div scrollable (only the second div).
currently in my code, the entire div(parent) is getting scrolled, please let me know how can I fix this.
below is my HTML.
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="complaince-chat-box-new-avatar-div">
<div class="complaince-chat-box-new-head" style="display:none">Compliance Avatar</div>
<div class="animatedAvatar" id="avatar">
<br><img style="width: 174px;height: 200px;margin-left: -2px;" src="/ImageIcons/lisa.png">
</div>
<div class="belowAvatar">
<div class="Faq-chat-box-new-head">
FAQs...
</div>
<div class="panel-body chat-box-new">
<ul class="questionsUl">
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
</ul>
</div>
</div>
</div>
</div>
please let me know how can I fix the first div and make only send one scrollable. Here is the working fiddle. https://jsfiddle.net/byhrbos9/
Thanks

Answer 1

Given the number of explicitly defined heights, you would need to modify two things to achieve what you want:
Firstly, remove the style overflow:scroll from the following:
.col-lg-3 {
background-color: orange;
width: 35%;
overflow:scroll;
}
This will remove the scroll for the entire content.
Secondly add the following styles to the belowAvatar class:
overflow-y:scroll;
height: 252px;
The height is determined by taking the overall height of the containing div: 502px.
Remove the height of the animatedAvatar class : 310px, which is 192px.
Then, due to the margin-top offset of -60px on the belowAvatar class, you add on 60px to 192px, to get 252px.
The result is as follows:
.col-lg-3 {
background-color: orange;
width: 35%;
}
.complaince-chat-box-new-avatar-div {
height: 502px;
border-radius: 43px;
}
.animatedAvatar {
width: 250px;
height: 310px;
margin-left: 0px;
}
.belowAvatar {
margin-top: -60px;
overflow-y: scroll;
height: 252px;
}
.Faq-chat-box-new-head {
padding: 10px 1px;
border-bottom: 1px solid #fff;
color: #fff;
text-align: center;
border-top-left-radius: 4em;
border-top-right-radius: 4em;
font-size: 15px;
height: 35px;
}
.chat-box-new {
height: calc(100% - 50px);
}
.questionsUl {
margin-left: -45px;
}
.questionsUl li {
color: #fff;
list-style: none;
margin-top: 0em;
}
#custBtn {
width: auto;
white-space: normal;
font-size: 13px;
border: 0px;
text-align: left;
padding: 0.5em;
margin-left: 0.85em;
cursor: pointer;
}
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="complaince-chat-box-new-avatar-div">
<div class="complaince-chat-box-new-head" style="display:none">Compliance Avatar</div>
<div class="animatedAvatar" id="avatar">
<br>
<img style="width: 174px;height: 200px;margin-left: -2px;" src="/ImageIcons/lisa.png">
</div>
<div class="belowAvatar">
<div class="Faq-chat-box-new-head">
FAQs...
</div>
<div class="panel-body chat-box-new">
<ul class="questionsUl">
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
<li>
<p id="custBtn" onclick="startSubAjax(this.innerText);">Hi</p>
</li>
</ul>
</div>
</div>
</div>
</div>

Answer 2

In first division inside image tag write
style="position:fixed"

Answer 3

There are a couple of other things you need to fix to achieve the perfect look but I'll answer what you asked, the problem can be fixed if you add this css:
.belowAvatar {
margin-top: -60px;
height: 200px;
overflow: scroll;
}