Scrollbar overlaps content in IE / Edge

Question

I would like to have a horizontal scroll bar and a vertical scroll bar on the root container and a vertical scroll bar on the sub-containers and a horizontal scroll bar. Compatibility Required: IE, Edge, Chrome, FF. (Latest Version)

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

There are no scrolling issues in Chrome and FF, but in IE11 and Edge the scrolling of the root container overlaps with the contents of the secondary container.

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

Here is my problem in the script.

What did I miss to make it work?

EDIT:

Windows 10 Edge

Windows 10 IE

Note that in IE11, borders are not visible. The error is more noticeable on Edge

Answer 1

I don't like this solution, but I added media queries for IE and Edge based on itodd's answer.

IE 11: How to configure only IE (any version) in the stylesheet? (Edge Hack not working)

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .document { padding-bottom: 17px; } } 

Edge: How to customize Microsoft Edge using CSS?

 @supports (-ms-ime-align: auto) { .document { padding-bottom: 12px; } } 

Answer 2

Do you use windows 8+? Can post a screenshot of the problem?

(I am using IE11 and Windows 7 and it looks fine)

Windows 8+ has a problem (or a design function, depending on how you look at it) when the scroll bar overlaps the content. Try the following and let me know if your problem fixes.

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

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

Answer 3

Be sure to check out the list of Flex errors that IE has; especially because you use box-sizing: border-box , a property that has compatibility issues in IE: https://github.com/philipwalton/flexbugs#flexbug-7