Style not showing when scrolling - html

Question

I am having a problem when I have a scrolling div when I scroll the background and border styles are not applied to the inner divs.
I have tried to simplify the problem here;
https://jsfiddle.net/w498trmf/22/
.GridScrollOuter {
overflow-x: hidden;
white-space: nowrap;
}
.GridScrollHeader {
overflow-x: auto;
}
.GridHeader {
background-color: #c8ffbb !Important;
color: red;
border-top: 1px solid #337ab7;
border-bottom: 1px solid #337ab7;
}
.Column {
width: 50%;
display: inline-block;
}
<div class="GridScrollOuter">
<div class="GridScrollHeader">
<div class="GridHeader">
<div class="Column">
<button>Button1</button>
</div>
<div class="Column">
<button>Button2</button>
</div>
<div class="Column">
<button>Button3</button>
</div>
</div>
</div>
</div>

Answer 1

It's because you have
.Column {
width: 50%;
display: inline-block;
}
Three divs with 50% width, so it's like 150% width. And .GridHeader is only 100% width.
Try this:
Make your .GridHeader 150% width
.GridHeader {
background-color: #c8ffbb !Important;
color: red;
border-top: 1px solid #337ab7;
border-bottom: 1px solid #337ab7;
width: 150%;
}
and your .Column 33% width:
.Column {
width: 33%;
display: inline-block;
}
Or if you will always have different number of divs, then forget about width and just add these classes to .GridHeader:
.GridHeader {
display: flex;
justify-content: space-between;
}
Here's the code snippet for non-constant number of inner divs.
.GridScrollOuter {
overflow-x: hidden;
white-space: nowrap;
}
.GridScrollHeader {
/*background-color: #c8ffbb !Important;
border-top: 1px solid #337ab7;
border-bottom: 1px solid #337ab7;*/
overflow-x: auto;
}
.GridHeader {
background-color: #c8ffbb !Important;
color: red;
border-top: 1px solid #337ab7;
border-bottom: 1px solid #337ab7;
width: 150%;
display: flex;
justify-content: space-between;
}
<div class="GridScrollOuter">
<div class="GridScrollHeader">
<div class="GridHeader">
<div class="Column">
<button>Button1</button>
</div>
<div class="Column">
<button>Button2</button>
</div>
<div class="Column">
<button>Button3</button>
</div>
</div>
</div>
</div>