Why does <input> inside an overflow <div> move itself when typing

Question

I have no idea whats going on here:

<div style="position: absolute; width: 70px; height: 100px; left: 60px; top: 30px; overflow:hidden; background-color: rgb(255, 192, 192);">
  <div style="position: absolute; top: 22px; left: 18px;">
    <input type="text" placeholder="type here" style="width: 150px; height: 21px; overflow: hidden;"/>
  </div>
</div>

http://jsfiddle.net/7MX54/1/

Type in the textbox and it changes its position. No JS involved! Why is that? Which CSS rule to the rescue?

Edit: Thanks for clarification. I changed the width to 100% - good enough: http://jsfiddle.net/7MX54/2/

Answer 1

Actually, the textbox’s position isn’t changing; its container is scrolling. This is a browser accessibility thing, and CSS can’t do that.

You’ll notice the same thing in any overflow: hidden; container when the focus changes to something out of view, for example.

Answer 2

If you have a huge column of textboxes and you tab through them, eventually the page will "magically" scroll down so that the textbox you are typing in is in view. This is exactly the same thing. The browser will ensure that you can see where you are typing.

overflow:hidden does NOT prohibit scrolling, it merely disables the scrollbar. The scroll position can still be changed by JavaScript, or by the textbox as seen here.