输入字段溢出移动包含 Div答案

【问题标题】：Input Field Overflow Moves Containing Div输入字段溢出移动包含 Div
【发布时间】：2012-07-24 10:43:59
【问题描述】：

由于我最初编写问题的方式收到了一些反对票，并且示例链接不再包含问题，所以我将描述我遇到的特定于 Chrome 的问题。

在 chrome 中突出显示输入字段中溢出的文本时，如果我将鼠标拖动到页面的右侧，包含的 div 会向左滑动。最初我认为这个问题是由输入字段引起的，但结果我在同一个容器内有一个单独的 div，它比容器宽。

#container {
    width: 100px;
}

#inputfield {
    width: 50px;
}

#otherthing {
    width: 300px;
}

HTML：

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

【问题讨论】：

我已经回答了您的问题，但以后请尝试详细描述您遇到的问题，而不是要求人们点击可能是垃圾链接的随机 URL。另外，请详细说明您尝试过的步骤，如果可能，请提供代码示例。
非常感谢，重写了问题。
非常好，很高兴它成功了！

标签： javascript html google-chrome input textfield

【解决方案1】：

虽然您问题的格式看起来像是垃圾链接，但我还是点击了它。发生这种情况的原因是因为您有效地突出显示了该容器中的所有文本，该容器有一个溢出右手边界的元素。看看<div id="selection"> - 它比容器宽，因此将所有子项的总宽度推到边界框之外。浏览器正在尝试通过自动滚动内容来帮助您查看突出显示的内容。

简而言之：修复 #selection 元素的 CSS，使其不会与容器重叠。

【讨论】：