title: Scrollbar overlaps content on IE/Edge
body: <p>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)</p>
  
  <pre><code>&lt;rootcontainer&gt; =&gt; horizontal scroll
   &lt;subcontainer1&gt; =&gt; vertical scroll
    &lt;data&gt;&lt;/data&gt;
   &lt;/subcontainer1&gt;
   &lt;subcontainer2&gt; =&gt; vertical scroll
     &lt;data&gt;&lt;/data&gt;
   &lt;/subcontainer2&gt;
  &lt;/rootcontainer&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Note: each subcontainer must have a width equals to 50% of the subcontainer.</p>
  
  <p><a href="https://jsfiddle.net/vknwsyge/15/" rel="nofollow noreferrer">Here is my problem in a fiddle.</a></p>
  
  <p>What did I missed to make it work ?</p>
  
  <p>EDIT :</p>
  
  <p>Windows 10 Edge
  <a href="https://i.stack.imgur.com/hpoUs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hpoUs.png" alt="Win10 Edge"></a></p>
  
  <p>Windows 10 IE
  <a href="https://i.stack.imgur.com/N6qHc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N6qHc.png" alt="W"></a></p>
  
  <p>Please note that on IE11, the borders are not visibles.
  The bug is more visible on Edge</p>