滚动条与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%.

这是我的小提琴问题.

我错过了什么使它工作？

编辑:

Windows 10 Edge

Windows 10 IE

请注意,在IE11上,边框不可见.这个错误在Edge上更明显

Answer 1

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

IE 11：如何在样式表中仅针对 IE（任何版本）？（Edge Hack 不起作用）

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

Edge：如何使用 CSS 定位 Microsoft Edge？

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