Div inside Div - separate scrolls - html

Question

I'm looking to build a gantt chart with the days, months and years across the top and the tasks below them.
Here is what I have so far:
So in the image above, the scroll-x is working on everything including the blue, red and yellow divs and the grey div below them. This is to ensure that as you scroll across, the days stay with the contents of the grey div. scroll-y is only acting on the grey div with the blue campaign name div in it.
Here is the problem:
The problem is that when you move the scroll-x of parent, the scroll-y moves across the screen (so that it is sitting in the middle of the parent div). What I'm looking to do is have the scroll-x work on all of the parent's content and the scroll-y only work on the grey div but for the scroll bar to stay on the far right of the parent.
Any advice would be really appreciated and thanks in advance.
css:
.container {
position: relative;
}
.parent {
overflow-x: scroll;
overflow-y: hidden;
height: 100%;
width: 100%;
position: absolute;
}
.date {
width: 2000px;
height: 25px;
float: left;
}
.hold_content {
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - 50px)
}
.content {
height: 2000px;
width: 2000px;
float:left;
}
html
<div class="container">
<div class="parent">
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="hold_content">
<div class="content"></div>
</div>
</div>
</div>

Answer 1

So, the scrollbar is relative to whatever it's scrolling, which, here, is the hold-content div. And, unfortunately, when that's set to its full width of 2000px, that means the scroll-y scrollbar is not visible because it's offscreen, like so:
html {
box-sizing: border-box;
font-family: sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body,
.container,
.parent {
height: 100vh;
}
html,
body,
div {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.parent {
overflow-y: hidden;
}
.date {
height: 25px;
width: 2000px;
}
.date:nth-of-type(1) {
background: blue;
}
.date:nth-of-type(2) {
background: red;
}
.date:nth-of-type(3) {
background: yellow;
}
.hold_content {
background: silver;
height: calc(100vh - 75px);
overflow: scroll;
width: 2000px;
}
.content {
height: 2000px;
text-align: center;
width: 2000px;
}
<div class="container">
<div class="parent">
<div class="date">Year</div>
<div class="date">Month</div>
<div class="date">Date</div>
<div class="hold_content">
<div class="content">
<button>Campaign Name</button>
</div>
</div>
</div>
</div>
Not sure if that's ideal or what you were going for. If you want the scrollbar to always be connected to the window (as it is by default), you're probably better off not scrolling these individual divs and instead using position:fixed on your date divs.
Note that this solution uses both viewport units (http://caniuse.com/#feat=viewport-units) and calc (http://caniuse.com/#feat=calc). Also, my code doesn't perfectly mirror your CSS because the code you provided didn't match up with your screenshots.