Prevent scrolling due to overflow in non-scrollable elements - html

Question

It's hard to explain the issue, as this seems more like a cross-browser bug than it does a feature. Follow the steps here to see the issue:
Steps to reproduce:
Run code snippet.
Click in textbox.
Repeatedly press right-arrow key until text cursor passes edge of box.
At this point the box will start 'scrolling' (in spite of the overflow: hidden). The grey background element that should fill the box 'slides' left, and to the right of it the white background behind can then be seen.
Desired behavior:
When going out of box, the text cursor simply escapes view, and the box scroll position does not slide to compensate.
How can I disable this 'no scrollbar' scrolling effect? (Note, it is in fact scrolling, because the js scrollLeft value of the overflow-box actually changes, even without a scrollbar.)
A CSS solution would really be ideal (e.g., a working overflow: hidden), but a Javascript solution could still suffice.
.overflow-box {
margin: 20px;
position: relative;
width: 64px;
height: 64px;
overflow: hidden;
border: 1px solid black;
}
.background {
position: absolute;
width: 100%;
height: 100%;
background-color: #a0a0a0;
}
.textbox {
position: relative;
margin: 20px;
width: 200px;
}
<div class="overflow-box">
<div class="background"></div>
<input type="text" value="aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo" class="textbox"/>
</div>
I apologize if this question is a duplicate. I cannot find a similar question since I don't know what the effect is called..
TIA!

Answer 1

Ok, so I discovered two things:
The issue only occurs on elements with overflow: hidden
When 'scrolling', the box emits the scroll event when changing, allowing one to do the following to prevent the scrolling:
document.querySelector('.overflow-box').addEventListener('scroll', evt => {
evt.target.scrollTop = 0;
evt.target.scrollLeft = 0;
});
Since I have a specific container that needs to prevent scroll, I'm using CSS to set overflow: hidden on it to trigger the issue on the container and not a parent element, and then I'm applying the JS above to prevent the scrolling.
This seems to be the best solution in my case.
If anyone knows of a simpler CSS solution, I will accept that answer over this one.

Answer 2

I am not sure if this what did you asking about:
if you need to solve problem of hidden content you only need to resize width at first and last selector
if you need to make text with scroll you can change type into text area and then defining rows and cols attribute, this should manage that.
If all of this does not help please add some picture of the expected result you need to make it clear.