滚动条与IE / Edge上的内容重叠

Question

我想要一个水平滚动条，根容器上没有垂直滚动，子容器上没有垂直滚动条，也没有水平滚动条。 需要兼容性：IE，Edge，Chrome，FF。 （最新版本）

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

Chrome和FF上的滚动没问题，但在IE11和Edge上，根容器的滚动与子容器的内容重叠。

注意：每个子容器的宽度必须等于子容器的50％。

Here is my problem in a fiddle.

我错过了什么让它发挥作用？

编辑：

Windows 10 Edge

Windows 10 IE

请注意，在IE11上，边框不可见。 该漏洞在Edge

上更明显

Answer 1

您使用的是Windows 8+吗？可以发布问题的截图吗？

（我正在使用IE11和Windows 7，看起来很好）

在Windows 8+上使用IE10 +存在问题（或设计功能，具体取决于您的看法）滚动条覆盖内容。请尝试以下操作，并告诉我它是否可以解决您的问题。

{{1}}

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

Answer 2

请务必查看IE拥有的Flex错误列表;特别是因为你正在使用box-sizing: border-box，一个已知在IE中具有兼容性问题的属性：https://github.com/philipwalton/flexbugs#flexbug-7

Answer 3

我不喜欢这个解决方案，但我根据itodd响应添加了IE和Edge的媒体查询。

IE 11：How to target only IE (any version) within a stylesheet?（Edge Hack不起作用）

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

边缘：How to target Microsoft Edge with CSS?

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