When should width:100% be used instead of width:auto?

Question

css

After all, auto takes border+padding+margin into account, while width doesn't. Why/when should width:100% be used?

Answer 1

width: auto; - allows the browser to calculate the width of the element itself.
element , the rules are width: auto; and width: 100%; will be equivalent, because By default, the browser must stretch block-level elements to the full width of the parent (if they are in the flow, of course). Imagine now that we have a picture ( img ) 100 by 100 pixels in size. If we tell it width: auto; , then it will remain 100 pixels wide. But if we tell her width: 100%; , then it will stretch to the full width available to it.
That's when we need some element to occupy the entire width available to it, and when it doesn't know how to do this by default, then we need to explicitly tell it width: 100%; .