I am facing an issue with 2 scrolling divs (outlined in red) that refuse to scroll to the bottom. I cannot seem to pinpoint what needs to be adjusted to resolve this problem.
The thick outlined box represents a simulated browser window.
HTML
<div class="container">
<div class="header"></div>
<div class="sidebar"></div>
<div class="main">
<div class="detail-container">
<div class="top-info"></div>
<div class="items-container">
<div class="item blue"></div>
<div class="item orange"></div>
<div class="item blue"></div>
<div class="item orange"></div>
</div>
</div>
<div class="main-container">
<div class="main-header"></div>
<div class="main-content">
<div class="item grey"></div>
<div class="item purple"></div>
<div class="item grey"></div>
<div class="item purple"></div>
<div class="item grey"></div>
<div class="item purple"></div>
<div class="item grey"></div>
<div class="item purple"></div>
</div>
</div>
</div>
</div>
CSS
.container {
height: 500px;
width: 500px;
border: solid 3px black;
overflow: hidden;
}
.header {
height: 25px;
background-color: #333;
right: 0;
left: 0;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
width: 75px;
margin-top: 35px;
border: solid 1px grey;
}
.main {
height: 100%;
padding-left: 75px;
}
.main-container {
width: 65%;
height: 100%;
}
.main-content {
height: 100%;
overflow-y: scroll;
border: solid 1px red;
}
.main-header {
height: 20px;
border: 1px solid black;
}
.detail-container {
float: right;
width: 35%;
height: 100%;
border: solid 1px grey;
}
.top-info {
padding: 75px 0;
}
.items-container {
height: 100%;
overflow-y: scroll;
border: solid 1px red;
}
.item {
padding: 100px 0;
}
.blue { background-color: blue; }
.orange { background-color: orange; }
.grey { background-color: grey; }
.purple { background-color: purple; }
.content {
width: 65%;
height: 100%;
}