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

Could you please clearly mention whats your exact problem is? — Xavier Issac, Dec 03 '17 at 06:31
On IE and Edge, the horizontal scroll of the root container is overlapping on the content of the subcontainers. Test the fiddle on Chrome and FF, no problem with the scroll. On IE and Edge, the scroll overlaps. Check the border. — Zysce, Dec 03 '17 at 08:52
Do you mean that the left border is sticking to the text? because I don't think that some content is hidden and couldn't be made visible by scrolling — user10089632, Dec 06 '17 at 15:11
On Edge, the bottom is truncated and on IE, the border-bottom is not visible. Check on the pictures. — Zysce, Dec 07 '17 at 08:52

score 4 · Answer 1 · answered Dec 05 '17 at 01:31

4

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

answered Dec 05 '17 at 01:31

itodd

2,278
1
14
14

I added pictures to the post and updated the fiddle. Unfortunately, it does not fix the problem. – Zysce Dec 05 '17 at 07:11
Can you try adding `padding-bottom:17px;` to `.document`? – itodd Dec 09 '17 at 04:15
It's breaking the interface on Chrome and FF. Content and container should adapt by themself. – Zysce Dec 12 '17 at 08:18
Add this IE only css.. `@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .document { padding-bottom: 17px; } }` – itodd Dec 12 '17 at 09:15

score 1 · Answer 2 · answered Dec 04 '17 at 14:17

1

Be sure to check the list of Flex bugs that IE has; especially since you're using box-sizing: border-box, a property known to have compatibility issues in IE: https://github.com/philipwalton/flexbugs#flexbug-7

answered Dec 04 '17 at 14:17

murb

1,736
21
31

I tried to add flex-basis: auto and/or a wrapper without border and with a box-sizing. It does not work. – Zysce Dec 05 '17 at 07:24

score 1 · Accepted Answer · answered Dec 12 '17 at 10:41

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

IE 11 : How to target only IE (any version) within a stylesheet? (Edge Hack does not work)

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

Edge : How to target Microsoft Edge with CSS?

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

Scrollbar overlaps content on IE/Edge

3 Answers3