Scrollbar overlaps content on IE/Edge

Question

I would like to have an horizontal scrollbar and no vertical scroll on a root container and vertical scrollbar on sub-containers and no horizontal scrollbar. Compatibility needed : IE, Edge, Chrome, FF. (Latest versions)

<rootcontainer> => horizontal scroll
 <subcontainer1> => vertical scroll
  <data></data>
 </subcontainer1>
 <subcontainer2> => vertical scroll
   <data></data>
 </subcontainer2>
</rootcontainer>

No problem with the scroll on Chrome and FF, but on IE11 and Edge, the scroll of the root container is overlapping with the content of the sub container.

Note: each subcontainer must have a width equals to 50% of the subcontainer.

Here is my problem in a fiddle.

What did I missed to make it work ?

EDIT :

Windows 10 Edge

Windows 10 IE

Please note that on IE11, the borders are not visibles. The bug is more visible on Edge

Answer 1

Are you using windows 8+? Can post a screenshot of the issue?

(I'm using IE11 and Windows 7 and it looks fine)

There is an issue (or design feature, depending on how you look at it) with IE10+ on Windows 8+ where the scrollbar overlays the content. Try the following and let me know if it fixes your problem.

.document,
.meta,
.viewer,
.other-doc {
    -ms-overflow-style: scrollbar;
}

Check out https://msdn.microsoft.com/en-us/library/mt712067(v=vs.85).aspx