Make a scrollbar stay visible on content that is too big

Question

I'm creating a data grid using div's. I need the data in the grid to scroll with the headers in the x direction which works properly in the example. My problem is I want the headers to always remain visible at the top of the grid so I put the grid's data in another div and use it scroll in the Y direction. Because the data rows are wider than the parent div, the Y scroll bar is usually not visible. You have to scroll all the way to right to use the Y scroll bar. Is there any way to keep the scroll bar visible at all times? I've tried different options with css overflow but can't seem to find the right solution.

working example of scroll problem

Answer 1

Give this a try, it might work

html {
       overflow-x: scroll;
}