Width of nested elements

Question

1. By default the CSS Width property is set to value “Auto”. What width value is used on an element when Width is set to “Auto”?

2. If we nest a textbox ( <input type="text" /> ) inside div element, the width of which is smaller than that of a textbox, then part of textbox is displayed outside the div element (I think it's called overflowing, but I’m not sure)

.

<div style="width:120px; background-color:Aqua;">
    <input type="text" style="width:1000px;" />
</div>

I realize one way to handle this problem is for nested element to have its CSS width property set to some percentage value V ( 0% < V < 100% ), but is there also a more elegant way of forcing nested elements to automatically adjust their width to that of the parent element and so that they wouldn’t overflow?

Answer 1

1) By default the CSS Width property is set to value “Auto”. What width value is used on an element when Width is set to “Auto”?

It depends on the element. Usually elements will expand to display their entire contents, unless that expansion would exceed existing constraints, in which case that constraint is its width.

is there also a more elegant way of forcing nested elements to automatically adjust their width to that of the parent element and so that they wouldn’t overflow?

You just described it. Setting width: 100% is the way to have the element fill its parent. If you want to constrain the nested element's width further, you can use the max-width and min-width properties, which allow you to enforce maximum and minimum sizes on elements that have variable widths.