I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond the parent element. Is there a way to prevent the screen from scrolling while typing outside the container? It would be ideal if the input text wouldn't scroll either, just concealing whatever is typed beyond the parent and input field.
To clarify further, I've prepared a fiddle
.wrapper {
width: 200px;
height: 150px;
position: relative;
overflow: hidden;
border: 1px solid #ccc;
}
input.test1 {
position: absolute;
top: 50px;
left: 5px;
width: 250px;
}
input.test2 {
position: absolute;
top: 10px;
left: 90px;
width: 150px;
}<div class='wrapper'>
<input type="text" class="test1" />
<input type="text" class="test2" />
</div>