Unknown padding on the right side of left scroll div in chrome

Question

I have a table with some contents. The contents increase on button click. I have managed to add scroll on the right side when overflowed. Everything works fine. When i change the scroll to left side there is an unknown padding on the right side of the div outer-wrapper . The issue is seen only when inspecting and hover over the dom element. The issue is only in chrome. I have tested with mozilla and it's working.

<div class="test-container">
  <div class="outer-wrapper">
    <div class="inner-wrapper">
      <table class="table">
        <tr>
          <td class="content-box">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <button type="button" id="click-me">
  Click Me to Fill
  </button>
</div>

The issue is with outer-wrapper . It shows unknown extension to right on inspecting.

Here is the fiddle

Here is the screenshot of issue

Answer 1

You can use overflow-y: overlay; - This only works on WebKit browsers, This means that the viewport will have the same width without scroll

 $('#click-me').click(function(){ $('.table .content-box').append('<p>test</p>'); }); 

 .test-container{ width:100%; border:1px solid lightgray; height:530px; overflow:hidden; } .outer-wrapper{ border:1px solid lightgray; height:530px; width:320px; overflow-y:auto; overflow-y:overlay; box-sizing:border-box; display:inline-block; direction:rtl; } .inner-wrapper{ width:290px; direction:ltr; /* border:1px solid yellow; */ } button{ display:inline-block; width:30%; margin-left:50px; margin-top:10px; /* text-align:right; */ vertical-align:top; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div class="test-container"> <div class="outer-wrapper"> <div class="inner-wrapper"> <table class="table"> <tr> <td class="content-box"> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> </td> </tr> </table> </div> </div> <button type="button" id="click-me"> Click Me to Fill </button> </div> 

Answer 2

If you change direction on outer-wrapper from rtl to ltr, it seems to fix the issue.

Is it possible the issue is caused by inconsistent rtl/ltr?