Scrollbar customization - html

Question

I've the below HTML Code.
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="chat-box-new-div">
<div class="chat-box-new-head">Frequently Asked Questions ..
</div>
<div class="panel-body chat-box-new">
<ul class="questionsUl">
<li>Who is a public official? </li>
<li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it? </li>
<li>My friend works for the client, does that mean I can't give her a gift? </li>
<li>Is there certain criteria for gifts and entertainment </li>
<li>How do I know if Gift or Entertainment is permissible? </li>
<li>can I give gift cards to my team? </li>
<li>Do I need approval to give a gift? </li>
<li>Are Facilitating Payments” to Public Officials allowed? </li>
<li>is there approval needed for gifts to public officials? </li>
<li>Who is a public official? </li>
<li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it? </li>
<li>My friend works for the client, does that mean I can't give her a gift? </li>
<li>Is there certain criteria for gifts and entertainment </li>
<li>How do I know if Gift or Entertainment is permissible? </li>
<li>can I give gift cards to my team? </li>
<li>Do I need approval to give a gift? </li>
<li>Are Facilitating Payments” to Public Officials allowed? </li>
<li>is there approval needed for gifts to public officials? </li>
<li>Who is a public official? </li>
<li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it? </li>
<li>My friend works for the client, does that mean I can't give her a gift? </li>
<li>Is there certain criteria for gifts and entertainment </li>
<li>How do I know if Gift or Entertainment is permissible? </li>
<li>can I give gift cards to my team? </li>
<li>Do I need approval to give a gift? </li>
<li>Are Facilitating Payments” to Public Officials allowed? </li>
<li>is there approval needed for gifts to public officials? </li>
<li>Who is a public official? </li>
<li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it? </li>
<li>My friend works for the client, does that mean I can't give her a gift? </li>
<li>Is there certain criteria for gifts and entertainment </li>
<li>How do I know if Gift or Entertainment is permissible? </li>
<li>can I give gift cards to my team? </li>
<li>Do I need approval to give a gift? </li>
<li>Are Facilitating Payments” to Public Officials allowed? </li>
<li>is there approval needed for gifts to public officials? </li>
<li>Who is a public official? </li>
<li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it? </li>
<li>My friend works for the client, does that mean I can't give her a gift? </li>
<li>Is there certain criteria for gifts and entertainment </li>
<li>How do I know if Gift or Entertainment is permissible? </li>
<li>can I give gift cards to my team? </li>
<li>Do I need approval to give a gift? </li>
<li>Are Facilitating Payments” to Public Officials allowed? </li>
<li>is there approval needed for gifts to public officials? </li>
<li>Who is a public official? </li>
<li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it? </li>
<li>My friend works for the client, does that mean I can't give her a gift? </li>
<li>Is there certain criteria for gifts and entertainment </li>
<li>How do I know if Gift or Entertainment is permissible? </li>
<li>can I give gift cards to my team? </li>
<li>Do I need approval to give a gift? </li>
<li>Are Facilitating Payments” to Public Officials allowed? </li>
<li>is there approval needed for gifts to public officials? </li>
</ul>
</div>
</div>
</div>
Here Basically, I've a parent and 2 child divs. and inside the second child div, there is some content and this is not limited, more the content, we should get a scroll bar to scroll (This is working fine currently).
I'm using overflow to get the scrollbar, but the issue is like this,
If I take the scroll bar on the parent div, the scroll is working till the end.
When I take the same in the child div, it is not scrolling the entire content.
But I want the scroll in the second div(the child div) and display the entire data.
here is a working fiddle.
https://jsfiddle.net/a1zhffka/
please let me know how can I fix this.
Thanks

Answer 1

Something like this? https://jsfiddle.net/a1zhffka/2/
You need to add the overflow to chat-box-new. From your question it sounds like you already tried this, but your main issue was the height. The height of the div should be the height of the container, minus the height of the header. By having too tall of a height, the content will be cut-off.
For this specific example, 461px seems like the sweet spot.
.chat-box-new {
overflow-y: scroll;
height: 461px;
}
And remove the scroll from the parent:
.chat-box-new-div {
height: 502px;
border: 2px solid #157DEC;
border-bottom: 2px solid #157DEC;
overflow: hidden;
}
For future consideration, you can avoid hard-coding all the heights if you give your header a fixed-height of say 50px, and then use height: calc(100% - 50px);