Question

Since the way I had initially written my question received some down votes, and the link to the example no longer contains the problem, I’ll describe the Chrome-specific issue I was encountering.

When highlighting overflowing text in an input field in chrome, if I dragged my mouse to the right of the page, the containing div would slide to the left. Initially I thought this issue was being caused by the input field, but it turned out that I had a separate div inside the same container that was wider than the container.

#container {
    width: 100px;
}

#inputfield {
    width: 50px;
}

#otherthing {
    width: 300px;
}

HTML:

<div id="container">
    <input type="text" value="Null" />
    <div id="otherthing"></div>
</div>

Answer 1

Whilst the format of your question looks like link-spam, I clicked on it any way. The reason it’s happening is because you’re effectively highlighting all the text within that container, which has an element that overflows the right hand bounds. Take a look at <div id="selection"> – it is wider than the container, therefore pushing the total width of all the children beyond the bounding box. The browser is trying to help you by auto-scrolling the content to allow you to see what you’re highlighting.

In short: fix your CSS for the #selection element so it doesn’t overlap the container.