Css 为什么textbox输入控件脱离父div？

我有以下html代码

<div style="background-color:Red;width:100px;height:100px;padding:5px;">
    <input type="text" class="text" id="txtExtraSubject" style="width:450px;"/>
</div>

当它在浏览器中运行时，div不会增长以容纳更大的文本框，它显示为文本框刚刚脱离div。

---

为什么会发生这种情况，以及如何修复这种情况？

因为

宽度：100px

的意思是“宽度为100像素”，而不是“宽度至少为100像素”

您可以应用一个显示属性，使其收缩包装，并添加一个

minwidth

---

（未经测试：

display:table；min width:100px；

，其他衬衫包装方法可用，包括浮动内容（

float:left

）

您正在为div指定高度和宽度-为什么它要忽略您告诉它的操作

---

只需删除宽度或将其设置为460px（文本区域为450px，填充区域为10px）

您还可以使用

溢出：自动”

它会将文本编辑约束到父div。但请注意，它不会增加父div的宽度，因为已经指定了宽度。结果将是一个水平滚动条

如果不希望这样做，请减小文本输入的宽度，或者在父级上使用
min width
，而不是
width
我现在正在测试min width，只是想确保它与ie6IE6的兼容性不支持min width。谷歌知道有黑客会伪造它。虽然它很管用，但问题是如果我不在div中包含display:table，它的宽度就会增加到100%。问题是我认为显示：表格不受ie7支持，因此我正在寻找另一种解决方案
float:left
还可以收缩包装是的，它与flat:left:一起工作。）ie7和ie6，谢谢，请使用float编辑您的答案，我将接受：）如果您是向下投票，请评论向下投票的原因。我不想每次更改内容时都设置div的宽度，我希望它像自动的一样，因此最小宽度实际上是我需要的：）