Scroll issue in chat webdesign - html

Question

I am getting scroll issue in chat website. Where bottom scrollbar is not visible and scroll is not working in live chat.
#charset "utf-8";
/* CSS Document */
html,
body {
font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
line-height: 20px;
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
height: 100%;
}
.inner {
max-width: 100%;
padding: 0 20px;
}
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
display: block;
position: relative;
float: left;
width: 100%
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
header {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
background: #333;
min-height: 60px;
}
header:after {
clear: both;
content: '';
display: table;
}
header nav {
position: relative;
padding: 20px;
}
.credit {
position: absolute;
top: 0;
right: 40px;
color: #fff;
text-align: right;
text-transform: capitalize;
font-weight: 700;
}
.credit i {
position: absolute;
top: 26px;
padding-left: 20px;
}
.credit p {
margin: 10px 0 0 0;
padding: 0;
}
.trigger {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 28px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.col-3:after {
content: '';
clear: both;
display: block;
}
.logo a {
position: absolute;
top: 26px;
left: 80px;
font-size: 28px;
display: block;
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.bets,
.video,
.chat {
position: relative;
overflow-y: scroll;
height: 100%;
z-index: 1;
background: #191919;
}
.PB15 {
padding: 15px 15px 15px 30px;
}
.section {
position: relative;
height: 100%;
width: 100%;
padding-top: 78px;
}
.PB80 {
padding-bottom: 78px;
}
.bets-title {
background: #282828;
padding: 15px 15px 15px 45px;
color: #fff;
line-height: 15px;
}
.bets-title span {
padding-left: 15px;
font-weight: 600;
}
.video {
background: #222222;
}
.video .video-content {
padding: 20px 10px 30px 60px;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: scroll;
}
.video-title {
list-style: none;
color: #fff;
margin: 0;
padding: 0;
}
.video-title li {
display: inline-block;
}
.video-title li:first-child {
font-size: 20px;
font-weight: 700;
}
.video-title li:last-child {
color: rgba(159, 159, 159, 1.00);
position: absolute;
right: 0;
margin-right: 20px;
}
.list {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
}
.video h3 {
color: #fff;
}
.list li {
display: inline-block;
color: #fff;
}
.list span {
padding: 0 20px 0 10px;
color: rgba(159, 159, 159, 1.00);
}
.max-100 {
display: block;
max-width: 100%;
}
.chat .bets-title {
margin-bottom: 10px;
}
.container {
padding: 20px 0 0 20px;
}
.users {
position: relative;
margin-bottom: 15px;
display: flex;
}
.users img {
width: 30px;
height: 30px;
max-width: 100%;
}
.username {
color: #a7a7a7;
font-weight: 600;
}
.users .user-msg {
color: #fff;
padding: 0 20px;
}
.users span:last-child {
padding-left: 10px;
}
.col-1 {
width: 8.33333333333%
}
.col-2 {
width: 16.6666666667%
}
.col-3 {
width: 25%
}
.col-4 {
width: 33.3333333333%
}
.col-5 {
width: 41.6666666667%
}
.col-6 {
width: 50%
}
.col-7 {
width: 58.3333333333%
}
.col-8 {
width: 66.6666666667%
}
.col-9 {
width: 75%
}
.col-10 {
width: 83.3333333333%
}
.col-11 {
width: 91.6666666667%
}
.col-12 {
width: 100%
}
#media (min-width: 768px) {
.col-3 {
width: 100%;
}
.col-6 {
width: 100%;
}
}
#media (min-width: 1200px) {
.col-1 {
width: 8.33333333333%
}
.col-2 {
width: 16.6666666667%
}
.col-3 {
width: 25%
}
.col-4 {
width: 33.3333333333%
}
.col-5 {
width: 41.6666666667%
}
.col-6 {
width: 50%
}
.col-7 {
width: 58.3333333333%
}
.col-8 {
width: 66.6666666667%
}
.col-9 {
width: 75%
}
.col-10 {
width: 83.3333333333%
}
.col-11 {
width: 91.6666666667%
}
.col-12 {
width: 100%
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Live Chat</title>
</head>
<body>
<header>
<div class="inner">
<nav>
<div class="trigger" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="logo">Chat
</div>
<div class="credit">
<p>Credtis available</p>
<p>23,000</p>
<i class="fa fa-user-circle"></i>
</div>
</nav>
</div>
</header>
<div class="section">
<div class="col-3">
<div class="bets-title">
<i class="fa fa-angle-right"></i> <span>Live Bets</span>
</div>
<div class="bets">
</div>
<div class="PB80"></div>
</div>
<div class="col-6 video">
<div class="video-contents">
<video width="100%" height="100%" controls>
<source src="demo.mp4" type="video/mp4"></source>
Your browser does not support the video tag.
</video>
<div class="video-content">
<ul class="video-title">
<li>The Mighty Scrpio VS Legacy Prime Mantis</li>
<li>1,548 watching now</li>
</ul>
<ul class="list">
<li><i class="fa fa-thumbs-o-up"></i><span>2.8k</span>
</li>
<li><i class="fa fa-thumbs-o-down"><span>112</span></i>
</li>
<li><i class="fa fa-reply"></i>
</li>
</ul>
<h3>Current Best Total: 13,000 credits</h3>
</div>
</div>
<div class="video-contents">
<video width="100%" height="100%" controls>
<source src="demo.mp4" type="video/mp4"></source>
Your browser does not support the video tag.
</video>
<div class="video-content">
<ul class="video-title">
<li>The Mighty Scrpio VS Legacy Prime Mantis</li>
<li>1,548 watching now</li>
</ul>
<ul class="list">
<li><i class="fa fa-thumbs-o-up"></i><span>2.8k</span>
</li>
<li><i class="fa fa-thumbs-o-down"><span>112</span></i>
</li>
<li><i class="fa fa-reply"></i>
</li>
</ul>
<h3>Current Best Total: 13,000 credits</h3>
</div>
</div>
<div class="video-contents">
<video width="100%" height="100%" controls>
<source src="demo.mp4" type="video/mp4"></source>
Your browser does not support the video tag.
</video>
<div class="video-content">
<ul class="video-title">
<li>The Mighty Scrpio VS Legacy Prime Mantis</li>
<li>1,548 watching now</li>
</ul>
<ul class="list">
<li><i class="fa fa-thumbs-o-up"></i><span>2.8k</span>
</li>
<li><i class="fa fa-thumbs-o-down"><span>112</span></i>
</li>
<li><i class="fa fa-reply"></i>
</li>
</ul>
<h3>Current Best Total: 13,000 credits</h3>
</div>
</div>
<div class="PB80"></div>
</div>
<div class="col-3">
<div class="bets-title">
<i class="fa fa-angle-right"></i> <span>Live Chat</span>
</div>
<div class="chat PB15">
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet</span><span>Lorem ipsum</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet</span><span>Lorem ipsum</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet</span><span>Lorem ipsum</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Rupareliya</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</div>
</div>
<div class="users">
<div class="user-msg">
<span class="username">Abhijeet Raina</span><span>Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</div>
<div class="PB80"></div>
</div>
</div>
</div>
</body>
</html>

Answer 1

Your chat class is assigned to wrong block. You have col-6 video block. Under that you have block with class col-3 to wrap your chat html. Just give him your special class chat and everything should work