Question

i have the following html code

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

when its run in the browser, the div doesn’t grow to accommodate the bigger textbox and it appears as the textbox is just breaking out the div.
Why is this happening and how to fix that?

Answer 1

Because width: 100px means “The width is 100 pixels” not “The width is at least 100 pixels”.

You could apply a display property that makes it shrink wrap and add a min-width instead.

(untested: display: table; min-width: 100px;, other shirk wrapping methods are available, including floating the content (float: left))