我有以下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。 为什么会发生这种情况以及如何解决这个问题？
答案 0 :(得分：3)
因为width: 100px表示“宽度为100像素”而不是“宽度至少为100像素”。
您可以应用一个显示属性，使其缩小换行并改为添加min-width。
（未经测试：display: table; min-width: 100px;，其他推送包装方法可用，包括浮动内容（float: left））
答案 1 :(得分：2)
您还可以在父级上使用overflow:auto;。
它会将文本编辑限制为父div。但请注意，由于已指定宽度，因此不会增加父级的宽度。结果将是一个水平滚动条。
如果不希望这样做，请减少文本输入的宽度，或使用父级min-width而不是width。
答案 2 :(得分：0)
你指定了div的高度和宽度 - 为什么要忽略你要告诉它的内容？
只需移除宽度或将其设置为460px（textarea为450px，填充为10px）