I am currently working with a table that dynamically increases in content when a button is clicked. I have successfully implemented a scroll on the right side to handle overflow. However, I encountered an issue when trying to change the scroll to the left side - there seems to be a mysterious padding on the right side of the outer-wrapper div element. This problem only manifests when inspecting and hovering over the DOM element, and strangely, it only occurs in Chrome. I have tested it in Mozilla and everything works perfectly.
<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 specifically lies within the outer-wrapper, which exhibits an unexplained extension to the right during inspection.
For reference, you can view the code on this fiddle
Additionally, here is a screenshot showcasing the problem: https://i.stack.imgur.com/kSDcy.jpg